@charset "UTF-8";
@import url(../font-awesome/css/font-awesome.min.css);
.container::after, .inner::after, .wrapper::after, .slideshow::after { clear: both; content: ''; display: block; visibility: hidden; height: 0; }

.breadcrumb-wrap ul.breadcrumb .home:before, .breadcrumb-wrap ul.breadcrumb li.icon:before, .navbar .open-navbar:before, .navbar .close-navbar:before, .navbar .productsMenu .itemList li:before, .products-search .search-box .search-btn:before, .products-content .products-header .inquiry-btn:before, .products-set .inquiry-btn:before, .pagination .double-left:before, .pagination .left-arrow:before, .pagination .right-arrow:after, .pagination .double-right:after, .btn-back a:link:before, .btn-back a:visited:before, .knowledge-list li .more:before { font-family: FontAwesome; font-style: normal; font-weight: normal; text-decoration: inherit; color: #333; font-size: 18px; padding-right: 0.5em; vertical-align: top; }

/* ================================================================ FlexSlider ================================================================*/
@font-face { font-family: 'flexslider-icon'; src: url("../fonts/flexslider-icon.html"); src: url("../fonts/flexslider-icond41d.html?#iefix") format("embedded-opentype"), url("../fonts/flexslider-icon-2.html") format("woff"), url("../fonts/flexslider-icon-3.html") format("truetype"), url("../fonts/flexslider-icon-4.html#flexslider-icon") format("svg"); font-weight: normal; font-style: normal; }
.flex-container a:hover, .flex-slider a:hover { outline: none; }

.slides, .slides > li, .flex-control-nav, .flex-direction-nav { margin: 0; padding: 0; list-style: none; }

.flex-pauseplay span { text-transform: capitalize; }

.flexslider { margin: 0; padding: 0; }
.flexslider .slides > li { display: none; -webkit-backface-visibility: hidden; }
.flexslider .slides img { width: 100%; display: block; }
.flexslider .slides:after { content: "\0020"; display: block; clear: both; visibility: hidden; line-height: 0; height: 0; }

html[xmlns] .flexslider .slides { display: block; }

* html .flexslider .slides { height: 1%; }

.no-js .flexslider .slides > li:first-child { display: block; }

.flexslider { margin: 0 0 0px; position: relative; zoom: 1; -moz-box-shadow: "" 0 1px 4px rgba(0, 0, 0, 0.2); -webkit-box-shadow: "" 0 1px 4px rgba(0, 0, 0, 0.2); box-shadow: "" 0 1px 4px rgba(0, 0, 0, 0.2); }
.flexslider .slides { zoom: 1; }
.flexslider .slides img { height: auto; -moz-user-select: none; }

.flex-viewport { max-height: 2000px; -moz-transition: all 1s ease; -o-transition: all 1s ease; -webkit-transition: all 1s ease; transition: all 1s ease; }

.loading .flex-viewport { max-height: 300px; }

.flex-direction-nav { *height: 0; }
.flex-direction-nav a { text-decoration: none; display: block; width: 30px; height: 80px; margin: -40px 0 0; position: absolute; top: 50%; z-index: 10; overflow: hidden; opacity: 0.1; cursor: pointer; color: rgba(255, 255, 255, 0.8); -moz-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; -webkit-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; }
.flex-direction-nav a:before { font-family: "FontAwesome"; content: '\f104'; font-size: 80px; line-height: 1; display: inline-block; color: white; }
.flex-direction-nav a.flex-next:before { content: '\f105'; }
.flex-direction-nav .flex-prev { left: 10px; }
.flex-direction-nav .flex-next { right: 10px; text-align: right; }

.flexslider:hover .flex-direction-nav .flex-prev { opacity: .7; left: 10px; }
.flexslider:hover .flex-direction-nav .flex-prev:hover { opacity: 1; text-shadow: 0 0 5px rgba(0, 0, 0, 0.5); }
.flexslider:hover .flex-direction-nav .flex-next { opacity: .7; right: 10px; }
.flexslider:hover .flex-direction-nav .flex-next:hover { opacity: 1; text-shadow: 0 0 5px rgba(0, 0, 0, 0.5); }

.flex-direction-nav .flex-disabled { opacity: 0 !important; filter: alpha(opacity=0); cursor: default; z-index: -1; }

.flex-pauseplay a { display: block; width: 20px; height: 20px; position: absolute; bottom: 5px; left: 10px; opacity: 0.8; z-index: 10; overflow: hidden; cursor: pointer; color: #000; }
.flex-pauseplay a:before { font-family: "flexslider-icon"; font-size: 20px; display: inline-block; content: '\f004'; }
.flex-pauseplay a:hover { opacity: 1; }
.flex-pauseplay a.flex-play:before { content: '\f003'; }

.flex-control-nav { width: 100%; position: absolute; bottom: 20px; z-index: 9999; text-align: center; }
.flex-control-nav li { margin: 0 5px; display: inline-block; zoom: 1; *display: inline; }

.flex-control-paging li a { width: 14px; height: 14px; display: block; cursor: pointer; text-indent: -9999px; background: #c8a062; border: 2px rgba(255, 255, 255, 0.3) solid; -moz-border-radius: 20px; -webkit-border-radius: 20px; border-radius: 20px; -moz-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1); -o-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1); -webkit-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1); transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1); }
.flex-control-paging li a:hover { background:rgba(200, 160, 98, 0.7); border: 2px white solid; -moz-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1); -o-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1); -webkit-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1); transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1); }
.flex-control-paging li a.flex-active { cursor: default; background:#c8a062; border: 2px white solid; }

.flex-control-thumbs { margin: 5px 0 0; position: static; overflow: hidden; }
.flex-control-thumbs li { width: 25%; float: left; margin: 0; }
.flex-control-thumbs img { width: 100%; height: auto; display: block; opacity: .7; cursor: pointer; -moz-user-select: none; -moz-transition: all 1s ease; -o-transition: all 1s ease; -webkit-transition: all 1s ease; transition: all 1s ease; }
.flex-control-thumbs img:hover { opacity: 1; }
.flex-control-thumbs .flex-active { opacity: 1; cursor: default; }

@media (max-width: 860px) { .flex-direction-nav .flex-prev { opacity: 1; left: 10px; }
  .flex-direction-nav .flex-next { opacity: 1; right: 10px; } }
@media (max-width: 480px) { .flex-direction-nav .flex-prev { opacity: .5; left: 5px; }
  .flex-direction-nav .flex-next { opacity: .5; right: 5px; }
  .flexslider:hover .flex-direction-nav .flex-prev { opacity: 1; left: 5px; }
  .flexslider:hover .flex-direction-nav .flex-next { opacity: 1; right: 5px; } }
/* layout */
body { background: #eee; font-family: "微軟正黑體", sans-serif; font-size: 14px; color: #000; line-height: 18px; }
body a:link, body a:visited { color: #333; outline: 0; text-decoration: none; }
body a:hover, body a:active { color: #111; outline: 0; text-decoration: none; }
body .ework { display: inline-block; letter-spacing: 0; font-size: 10px; padding: 0px 0 0 25px; }

.container { width: 100%; }

.inner { position: relative; }

.pagetop { position: fixed; right: 5px; bottom: 35px; width: 42px; height: 42px; cursor: pointer; z-index: 9000; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; background: rgba(0, 0, 0, 0.5); color: #fff; text-indent: -9998em; }
.pagetop a:link, .pagetop a:visited { color: #fff; outline: 0; }
.pagetop:before { content: ""; width: 16px; height: 16px; position: absolute; left: 50%; top: 50%; margin-top: -5px; margin-left: -10px; border-top: solid 2px #fff; border-left: solid 2px #fff; -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -webkit-transform: rotate(45deg); transform: rotate(45deg); }
.pagetop:hover { background: #333; color: #fff; }

.pagetop { opacity: 0; -moz-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1); -o-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1); -webkit-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1); transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1); }

.pagetop-show { opacity: 1; -moz-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1); -o-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1); -webkit-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1); transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1); }

.mobile-menu-btn { display: none; cursor: pointer; position: fixed; top: 10px; right: 10px; width: 46px; height: 35px; opacity: 1; z-index: 3000; background: #333; -moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px; cursor: pointer; }
.mobile-menu-btn span { -moz-transition: margin 0s, -moz-transform 0.2s, background-color 0.1s; -o-transition: margin 0s, -o-transform 0.2s, background-color 0.1s; -webkit-transition: margin 0s, -webkit-transform 0.2s, background-color 0.1s; transition: margin 0s, transform 0.2s, background-color 0.1s; -moz-transform-origin: 50% 50% 50%; -ms-transform-origin: 50% 50% 50%; -webkit-transform-origin: 50% 50% 50%; transform-origin: 50% 50% 50%; display: block; position: absolute; right: 10px; top: 7px; width: 26px; height: 4px; background: #fff; }
.mobile-menu-btn span:nth-child(2) { top: calc(7px + 9px); }
.mobile-menu-btn span:nth-child(3) { top: calc(7px + 9px * 2); }

.mobile-menu-btn-opened { position: fixed; }
.mobile-menu-btn-opened span:first-child { background-color: #fff; -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -webkit-transform: rotate(-45deg); transform: rotate(-45deg); margin-top: 9px; }
.mobile-menu-btn-opened span:nth-child(2) { -moz-transform: scale(0, 1); -ms-transform: scale(0, 1); -webkit-transform: scale(0, 1); transform: scale(0, 1); }
.mobile-menu-btn-opened span:nth-child(3) { background-color: #fff; -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -webkit-transform: rotate(45deg); transform: rotate(45deg); margin-top: -9px; }

.move-to-left { -moz-transform: translateX(-200px); -ms-transform: translateX(-200px); -webkit-transform: translateX(-200px); transform: translateX(-200px); }

.mobile-menu { width: 200px; height: 100%; overflow-y: auto; position: fixed; top: 0; right: -200px; z-index: 999; background: #333; -moz-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; -webkit-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out; }

.mobile-menu-inner { width: 100%; margin-top: 55px; }

.mobile-menu-items { position: relative; }
.mobile-menu-items .mobile-menu-item { position: relative; font-size: 18px; text-align: center; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2); -moz-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1); -o-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1); -webkit-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1); transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1); }
.mobile-menu-items .mobile-menu-item:last-child { border-bottom: 1px solid rgba(255, 255, 255, 0.2); }
.mobile-menu-items .mobile-menu-item a:link, .mobile-menu-items .mobile-menu-item a:visited { display: block; padding: 15px; box-sizing: border-box; color: white; }
.mobile-menu-items .mobile-menu-item a:hover, .mobile-menu-items .mobile-menu-item a:active { background: rgba(255, 255, 255, 0.3); -moz-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1); -o-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1); -webkit-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1); transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1); }

.mobile-line { display: none; }

.wrapper { position: relative; width: 100%; height: 100%; z-index: 2; -moz-transition: -moz-transform 0.5s ease-in-out; -o-transition: -o-transform 0.5s ease-in-out; -webkit-transition: -webkit-transform 0.5s ease-in-out; transition: transform 0.5s ease-in-out; }

.header_small .logo { height: 70px !important; padding: 5px 0 !important; -moz-transition: all 500ms ease-in-out; -o-transition: all 500ms ease-in-out; -webkit-transition: all 500ms ease-in-out; transition: all 500ms ease-in-out; }
.header_small .logo img { height: 60px !important; -moz-transition: all 500ms ease-in-out; -o-transition: all 500ms ease-in-out; -webkit-transition: all 500ms ease-in-out; transition: all 500ms ease-in-out; }
.header_small .logo h1 { display: none; }
.header_small .info { height: 70px !important; padding-bottom: 0 !important; -moz-transition: all 500ms ease-in-out; -o-transition: all 500ms ease-in-out; -webkit-transition: all 500ms ease-in-out; transition: all 500ms ease-in-out; }

.nav_small li a:link, .nav_small li a:visited { line-height: 40px !important; -moz-transition: all 500ms ease-in-out; -o-transition: all 500ms ease-in-out; -webkit-transition: all 500ms ease-in-out; transition: all 500ms ease-in-out; }

.slideshow_small { padding-top: 0px !important; -moz-transition: all 300ms ease-in-out; -o-transition: all 300ms ease-in-out; -webkit-transition: all 300ms ease-in-out; transition: all 300ms ease-in-out; }

.header { width: 100%; background: #fff;
          position: fixed;
          top: 0;
          z-index: 99999; }

.header_wrap { display: block; width: 100%; position: relative; }
.header_wrap .logo { float: left; width: 230px; height: 60px; margin-left: 5px; padding: 5px 0 5px 0; box-sizing: border-box; -moz-transition: all 500ms ease-in-out; -o-transition: all 500ms ease-in-out; -webkit-transition: all 500ms ease-in-out; transition: all 500ms ease-in-out; }
.header_wrap .logo img { height: 56px; -moz-transition: all 500ms ease-in-out; -o-transition: all 500ms ease-in-out; -webkit-transition: all 500ms ease-in-out; transition: all 500ms ease-in-out; }
.header_wrap .logo h1 { display: none; position: absolute; left: 0px; bottom: 0px; width: calc(50% - 20px); font-size: 12px; color: #666; }

.header_wrap .info { float: right; width: 300px; height: 62px; padding-top: 15px; box-sizing: border-box; -moz-transition: all 500ms ease-in-out; -o-transition: all 500ms ease-in-out; -webkit-transition: all 500ms ease-in-out; transition: all 500ms ease-in-out; }

.header_wrap .lang {position: absolute;display: block; height: 20px; padding: 25px 20px 2px 230px; font-size: 16px; line-height: 20px; font-weight: bold; }
.header_wrap .lang a{color:#ccc;background-color:#444;padding:3px;border-radius:3px;}
.header_wrap .lang a:hover, a:focus, a:active{color:#cc0033;}

.header_wrap .info .item { position: relative; display: block; height: 20px; padding-left: 25px; box-sizing: border-box; font-size: 14px; line-height: 20px; color: #444; font-weight: bold; }
.header_wrap .info .item:before { content: ""; position: absolute; top: -2px; left: 0; width: 20px; height: 20px; background: url("../images/icon-tel.svg") no-repeat; background-position: center center; }
.header_wrap .info .item:nth-child(2):before { width: 20px; height: 20px; background: url("../images/icon-mail.svg") no-repeat; background-position: center center; }
.header_wrap .info .item a:link, .header_wrap .info .item a:visited { color: #444; }
.header_wrap .info .item a:hover, .header_wrap .info .item a:active { color: #333; }

.nav { display: block; width: 100%; background: #880000; border-top: 2px solid #333; box-sizing: border-box; }
.nav .menu { display: -webkit-flex; display: -moz-flex; display: -webkit-flex; display: flex; -webkit-justify-content: space-around; -moz-justify-content: space-around; -ms-justify-content: space-around; -ms-flex-pack: space-around; justify-content: space-around; -webkit-align-items: stretch; -moz-align-items: stretch; -ms-align-items: stretch; -ms-flex-item-align: stretch; align-items: stretch; }
.nav li { display: inline-block; border-left: 1px solid rgba(255, 255, 255, 0.5); width: calc(100% / 7); background: #880000; text-align: center; }
.nav li:hover { background: #333333; }
.nav li:first-child { border-left: 0; }
.nav li a:link, .nav li a:visited { display: block; width: 100%; font-size: 16px; line-height: 34px; letter-spacing: .3rem; color: white; font-weight: bold; text-align: center; -moz-transition: all 500ms ease-in-out; -o-transition: all 500ms ease-in-out; -webkit-transition: all 500ms ease-in-out; transition: all 500ms ease-in-out; }
.nav li a:hover, .nav li a:active { color: white; }

.nav-button { height: 180px; width: 45px; color: #fff; font-size: 22px; text-align: center; position: fixed; text-decoration: none; list-style: none; top: 20%; right: 0px; z-index: 999999; opacity: 1; }
.nav-button a { display: block; float: right; height: 45px; width: 45px; margin: 0; outline: 0; text-align: center; box-sizing: border-box; -moz-transition: width 0.15s, -moz-transform 0.5s ease-in-out; -o-transition: width 0.15s, -o-transform 0.5s ease-in-out; -webkit-transition: width 0.15s, -webkit-transform 0.5s ease-in-out; transition: width 0.15s, transform 0.5s ease-in-out; }
.nav-button a:hover { width: 65px; -moz-transition: width 0.15s, -moz-transform 0.5s ease-in-out; -o-transition: width 0.15s, -o-transform 0.5s ease-in-out; -webkit-transition: width 0.15s, -webkit-transform 0.5s ease-in-out; transition: width 0.15s, transform 0.5s ease-in-out; }
.nav-button a i { color: #fff; }
.nav-button a.contact { background-color: #fc6d4c; padding: 8px 0; }
.nav-button a.line { background-color: #00c300; padding: 10px 0; }
.nav-button a.facebook { background-color: #3b5998; padding: 8px 0; }
.nav-button a.youtube { background-color: #FF0202; padding: 10px 0; }

.slideshow { float: left; width: 100%; padding-top: 0px; -moz-transition: all 600ms ease-in-out; -o-transition: all 600ms ease-in-out; -webkit-transition: all 600ms ease-in-out; transition: all 600ms ease-in-out; }


.headTitle0 { clear: both; display: block; width: 100%; padding-top: 25px; padding-bottom: 10px; margin-bottom: 25px; }
@media (max-width:640px){
.headTitle0 {padding-top: 30px;}
  
  }

.headTitle0 h2 { font-size: 24px; line-height: 35px; color: #000; font-weight: bold; text-align: center; text-transform: uppercase; }
.headTitle0 h2 span { letter-spacing: 5px; }
.headTitle0 h2 a { position: relative; padding-bottom: 3px; padding-left: 5px; border-bottom: 5px solid #222; }
.headTitle0 h2 a:before { content: ""; position: absolute; bottom: -5px; right: 0; width: 50%; height: 5px; background: #c8a062; }
.headTitle0 a:link, .headTitle a:visited { color: #222; }
.headTitle0 a:hover, .headTitle a:active { color: rgba(0, 0, 0, 0.8); }


.headTitle { clear: both; display: block; width: 100%; padding-top: 40px; padding-bottom: 10px; margin-bottom: 25px; }
@media (max-width:640px){
.headTitle {padding-top: 30px;}
	  
  }
.headTitle h2 { font-size: 24px; line-height: 35px; color: #000; font-weight: bold; text-align: center; text-transform: uppercase; }
.headTitle h2 span { letter-spacing: 5px; }
.headTitle h2 a { position: relative; padding-bottom: 3px; padding-left: 5px; border-bottom: 5px solid #222; }
.headTitle h2 a:before { content: ""; position: absolute; bottom: -5px; right: 0; width: 50%; height: 5px; background: #C8A062; }
.headTitle a:link, .headTitle a:visited { color: #222; }
.headTitle a:hover, .headTitle a:active { color: rgba(0, 0, 0, 0.8); }

.main-wrap .inner { background: #fff; margin-top:60px; }
@media (max-width: 1024px){
    .main-wrap .inner {margin-top:0px;}}

.products-wrap { clear: both; display: block; background: #ddd; padding-top: 20px; }

.products-list { clear: both; width: 92%; margin: 0 auto; padding-bottom: 50px; }
.products-list .item { position: relative; margin: 0px 15px; overflow: hidden; -moz-box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.5); -webkit-box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.5); box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.5); }
.products-list .item .title { position: absolute; top: 0; left: 0; z-index: 888; width: 100%; padding: 10px 0; box-sizing: border-box; background: rgba(0, 0, 0, 0.7); font-size: 15px; line-height: 20px; letter-spacing: .1rem; color: #fff; font-weight: 600; text-align: center; }
.products-list .item img { display: block; max-width: 100%; width: 100%; -moz-transition: all 500ms ease-in-out; -o-transition: all 500ms ease-in-out; -webkit-transition: all 500ms ease-in-out; transition: all 500ms ease-in-out; }
.products-list .item:hover img { -moz-transform: scale(1.1); -ms-transform: scale(1.1); -webkit-transform: scale(1.1); transform: scale(1.1); -moz-transition: all 500ms ease-in-out; -o-transition: all 500ms ease-in-out; -webkit-transition: all 500ms ease-in-out; transition: all 500ms ease-in-out; }

.news-wrap { background: #ddd; padding-top: 20px; }
.news-wrap .news-list { width: 96%; margin: 0 auto; }
.news-wrap .news-list .item { position: relative; display: inline-block; width: calc(100% / 3 - 20px); margin-right: 25px; margin-bottom: 20px; vertical-align: top; }
.news-wrap .news-list .item:nth-child(3n) { margin-right: 0; }
.news-wrap .news-list .item a:link, .news-wrap .news-list .item a:visited { color: white; }
.news-wrap .news-list .item a:hover, .news-wrap .news-list .item a:active { color: rgba(255, 255, 255, 0.8); }
.news-wrap .news-list .item .newsImg { position: relative; display: block; width: 100%; height: 260px; overflow: hidden; }
.news-wrap .news-list .item .newsImg .title { position: absolute; top: 0; left: 0; z-index: 888; height: 34px; padding-left: 15px; padding-right: 5px; box-sizing: border-box; background: rgba(176,31, 35, 0.9); font-size: 16px; line-height: 34px; color: #fff; text-align: left; letter-spacing: 5px; }
.news-wrap .news-list .item .newsImg .title:after { content: ""; position: absolute; right: -34px; top: 0; border-style: solid; border-width: 34px 34px 0 0; border-color: rgba(176,31, 35, 0.9) transparent transparent transparent; }
.news-wrap .news-list .item .flex-control-nav { bottom: 35px; }
.news-wrap .news-list .item .newsInfoTitle { position: absolute; bottom: 0; left: 0; z-index: 999; display: block; width: 100%; height: 30px; overflow: hidden; background: #222; padding-left: 6px; border-left: 6px solid #880000; box-sizing: border-box; font-size: 14px; line-height: 30px; color: #fff; font-weight: bold; }
.news-wrap .news-list .item .newsCase {padding:8px;background-color:#333;}
.news-wrap .news-list .item .newsCase a{padding-top:15px; color:#fff !important;font-size:16px;font-weight:600;}
.news-wrap .news-list .flexslider .slides li img { float: left; width: 100%; height: 284px; }

.red { color: #C30D23; }

.about-wrap { width: 100%; height: 300px; }
.about-wrap .photo { float: left; display: inline-block; width: 450px; height: 300px; overflow: hidden; }
.about-wrap .photo img { display: block; width: 100%; height: 410px; -moz-transition: all 500ms ease-in-out; -o-transition: all 500ms ease-in-out; -webkit-transition: all 500ms ease-in-out; transition: all 500ms ease-in-out; }
.about-wrap .photo:hover img { -moz-transform: scale(1.1); -ms-transform: scale(1.1); -webkit-transform: scale(1.1); transform: scale(1.1); -moz-transition: all 500ms ease-in-out; -o-transition: all 500ms ease-in-out; -webkit-transition: all 500ms ease-in-out; transition: all 500ms ease-in-out; }
.about-wrap .about-info { display: inline-block; width: calc(100% - 450px); height: 300px; padding: 30px 60px; box-sizing: border-box; background: #333; overflow: hidden; color: #fff; }
.about-wrap .about-info .title { position: relative; line-height: 1.2; }
.about-wrap .about-info .title h3 { font-size: 20px; }
.about-wrap .about-info .title h4 { font-weight: bold; font-size: 17px; letter-spacing: 2px; }
.about-wrap .about-info .title:before { content: ''; position: absolute; top: 0; left: -15px; width: 6px; height: 100%; background: #C30D23; }
.about-wrap .about-info .info { font-size: 15px; font-weight: bold; line-height: 1.6; }
.about-wrap .about-info .info { color: white; -moz-transition: all 500ms ease-in-out; -o-transition: all 500ms ease-in-out; -webkit-transition: all 500ms ease-in-out; transition: all 500ms ease-in-out; }
.about-wrap .about-info .info a:hover, .about-wrap .about-info .info a:active { color: rgba(255, 255, 255, 0.8); -moz-transition: all 500ms ease-in-out; -o-transition: all 500ms ease-in-out; -webkit-transition: all 500ms ease-in-out; transition: all 500ms ease-in-out; }

.map-wrap { clear: both; display: block; width: 100%; height: 330px; margin-top: 20px; overflow: hidden; -moz-box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.25); -webkit-box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.25); box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.25); }
.map-wrap .map { float: left; width: 100%; height: 100%; -moz-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1); -o-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1); -webkit-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1); transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1); }
.map-wrap .map iframe { width: 100%; height: 100%; }

.footer { clear: both; position: relative; display: block; width: 100%; }
.footer .inner { position: relative; padding: 20px 0; box-sizing: border-box; background: #fff;border-top:1px solid #ddd; }
.footer a:link, .footer a:visited { color: #000; }
.footer a:hover, .footer a:active { color: rgba(0, 0, 0, 0.8); }
.footer .footer-nav { display: block; width: 100%; margin-bottom: 15px; padding-left: 10%; padding-right: 10%; box-sizing: border-box; }
.footer .footer-nav .menu { display: -webkit-flex; display: -moz-flex; display: -webkit-flex; display: flex; -webkit-justify-content: space-between; -moz-justify-content: space-between; -ms-justify-content: space-between; -ms-flex-pack: space-between; justify-content: space-between; -webkit-align-items: stretch; -moz-align-items: stretch; -ms-align-items: stretch; -ms-flex-item-align: stretch; align-items: stretch; }
.footer .footer-nav .menu li { display: inline-block; text-align: center; }
.footer .footer-nav .menu li a:link, .footer .footer-nav .menu li a:visited { font-size: 18px; line-height: 22px; font-weight: bold; color: #333333; text-align: center; padding-bottom: 2px; border-bottom: 2px solid #C30D23; box-sizing: border-box; -moz-transition: all 300ms cubic-bezier(0.42, 0, 0.58, 1); -o-transition: all 300ms cubic-bezier(0.42, 0, 0.58, 1); -webkit-transition: all 300ms cubic-bezier(0.42, 0, 0.58, 1); transition: all 300ms cubic-bezier(0.42, 0, 0.58, 1); }
.footer .footer-nav .menu li a:hover, .footer .footer-nav .menu li a:active { color: black; width: 100%; padding-bottom: 2px; border-bottom: 4px solid #C30D23; -moz-transition: all 300ms cubic-bezier(0.42, 0, 0.58, 1); -o-transition: all 300ms cubic-bezier(0.42, 0, 0.58, 1); -webkit-transition: all 300ms cubic-bezier(0.42, 0, 0.58, 1); transition: all 300ms cubic-bezier(0.42, 0, 0.58, 1); }
.footer .footer-info { display: block; width: 100%; padding-right: 20px; box-sizing: border-box; }
.footer .footer-info .footer-logo { display: inline-block; width: 26%; margin-top: 10px; text-align: center; }
.footer .footer-info .footer-logo img { width: 148px; }
.footer .footer-info .footer-address { display: inline-block; width: calc(100% - 26% - 300px); }
.footer .footer-info .footer-address li { float: left; width: 100%; font-size: 16px; line-height: 1.4; font-weight: bold; letter-spacing: 1px; }
.footer .footer-info .footer-address li:not(:nth-child(1)) { margin-top: 2px; }
.footer .footer-info .footer-address li .company, .footer .footer-info .footer-address li .company-en, .footer .footer-info .footer-address li .telephone, .footer .footer-info .footer-address li .fax, .footer .footer-info .footer-address li .email, .footer .footer-info .footer-address li .web, .footer .footer-info .footer-address li .work { display: inline-block; }
.footer .footer-info .footer-address li div:first-child { margin-right: 20px; }
.footer .footer-info .QRCode { display: inline-block; width: 280px; vertical-align: super; text-align: right; }
.footer .footer-info .QRCode img { width: 50px; margin: 5px;}

/* media */
.inner { width: 1198px; margin-left: auto; margin-right: auto; }
.inner:after { content: " "; display: block; clear: both; }

@media (max-width: 1200px) { 
  .inner { width: 960px; margin-left: auto; margin-right: auto;}
  .inner:after { content: " "; display: block; clear: both; }

  }
@media (max-width: 1024px) { .inner { width: calc(100% - 30px); margin: 0 15px; } }
@media (max-width: 960px) { .inner { width: 100%; margin: 0; } }
@media (max-width: 1024px) { .slideshow { padding-top: 96px; }
  .news-wrap .news-list .item .newsImg { height: 250px; }
  .news-wrap .news-list .flexslider .slides li img { height: 250px; }
  .footer .footer-nav { padding-left: 180px; }
  .footer .footer-info .footer-logo { width: 180px; margin-top: -30px; }
  .footer .footer-info .footer-logo img { width: 148px; }
  .footer .footer-info .footer-address { width: calc(100% - 180px - 120px); } }
@media (max-width: 960px) { .news-wrap .news-list .item .newsImg { height: 230px; }
  .news-wrap .news-list .flexslider .slides li img { height: 230px; }
  .footer .footer-nav { padding-left: 20px; margin-bottom: 25px; }
  .footer .footer-info .footer-logo { width: 175px; margin-top: 0; }
  .footer .footer-info .footer-logo img { width: 148px; }
  .footer .footer-info .footer-address { width: calc(100% - 175px - 120px); }
  .footer .footer-info .footer-address li { letter-spacing: 0; } }
@media (max-width: 768px) { .news-wrap .news-list .item .newsImg { height: 173px; }
  .news-wrap .news-list .flexslider .slides li img { height: 173px; }
  .about-wrap .photo { width: 50%; }
  .about-wrap .about-info { width: 50%; padding: 15px; }
  .about-wrap .about-info .title:before { display: none; }
  .footer .footer-info .footer-logo { width: 140px; padding: 0 20px; box-sizing: border-box; }
  .footer .footer-info .footer-logo img { width: 110px; }
  .footer .footer-info .footer-address { width: calc(100% - 140px - 90px); }
  /* .footer .footer-info .QRCode { width: 80px; } */
  .footer .footer-info .QRCode img { width: 60px; } }
@media (max-width: 640px) { .header { -moz-box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.25); -webkit-box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.25); box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.25); }
  .header_wrap { -moz-box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.25); -webkit-box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.25); box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.25); }
  .header_wrap .logo { width: 230px; height: 50px; padding: 5px 0; }
  .header_wrap .logo img { height: 40px; }
  .header_wrap .info { display: none; }
  .nav { display: none; }
  .mobile-menu-btn, .mobile-menu-opened { display: block; }
  .slideshow { padding-top: 50px; }
  .news-wrap .news-list .item { width: 100%; margin-right: 0; }
  .news-wrap .news-list .item .newsImg { height: auto; }
  .news-wrap .news-list .flexslider .slides li img { height: auto; }
  .about-wrap { height: auto; }
  .about-wrap .photo { float: none; display: block; width: 100%; height: auto; }
  .about-wrap .photo img { height: auto; }
  .about-wrap .about-info { display: block; width: 100%; height: auto; padding: 20px; }
  .about-wrap .about-info .title:before { display: black; }
  .footer .footer-nav .menu { display: block; }
  .footer .footer-nav .menu li { padding: 10px; padding-left: 0; box-sizing: border-box; }
  .footer .footer-info .footer-logo { width: 100%; margin-bottom: 20px; }
  .footer .footer-info .footer-address { width: calc(100% - 90px); padding-left: 20px; box-sizing: border-box; }
  /* .footer .footer-info .QRCode { width: 80px; } */
  .footer .footer-info .QRCode img { width: 60px; } }
@media (max-width: 480px) { .footer .footer-info .footer-address { width: 100%; margin-bottom: 20px; }
  .footer .footer-info .QRCode { display: block; width: 100%; padding: 0 20px; box-sizing: border-box; } }
/* Slider */
.slick-slider { position: relative; display: block; box-sizing: border-box; -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -ms-touch-action: pan-y; touch-action: pan-y; -webkit-tap-highlight-color: transparent; }

.slick-list { position: relative; overflow: hidden; display: block; margin: 0; padding: 0; }
.slick-list:focus { outline: none; }
.slick-list.dragging { cursor: pointer; cursor: hand; }

.slick-slider .slick-track, .slick-slider .slick-list { -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); -o-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); }

.slick-track { position: relative; left: 0; top: 0; display: block; }
.slick-track:before, .slick-track:after { content: ""; display: table; }
.slick-track:after { clear: both; }
.slick-loading .slick-track { visibility: hidden; }

.slick-slide { float: left; height: 100%; min-height: 1px; display: none; }
[dir="rtl"] .slick-slide { float: right; }
.slick-slide img { display: block; }
.slick-slide.slick-loading img { display: none; }
.slick-slide.dragging img { pointer-events: none; }
.slick-initialized .slick-slide { display: block; }
.slick-loading .slick-slide { visibility: hidden; }
.slick-vertical .slick-slide { display: block; height: auto; border: 1px solid transparent; }

.slick-arrow.slick-hidden { display: none; }

/* Slider */
.slick-loading .slick-list { background: #fff url('../images/ajax-loadere72a.gif?1482283578') center center no-repeat; }

/* Icons */
/* Arrows */
.slick-prev, .slick-next { position: absolute; z-index: 1000; display: block; height: 80px; width: 40px; line-height: 0px; font-size: 0px; cursor: pointer; background: transparent; -moz-border-radius: 80px; -webkit-border-radius: 80px; border-radius: 80px; color: transparent; top: 50%; -webkit-transform: translate(0, -50%); -ms-transform: translate(0, -50%); transform: translate(0, -50%); padding: 0; border: none; outline: none; }
.slick-prev:hover, .slick-prev:focus, .slick-next:hover, .slick-next:focus { outline: none; color: transparent; }
.slick-prev:hover:before, .slick-prev:focus:before, .slick-next:hover:before, .slick-next:focus:before { opacity: 1; }
.slick-prev.slick-disabled:before, .slick-next.slick-disabled:before { opacity: 0.25; }
.slick-prev:before, .slick-next:before { font-family: "fontawesome"; font-size: 80px; line-height: 30px; color: #666; opacity: 0.75; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

.slick-prev { left: -40px; padding-right: 0; box-sizing: border-box; }
[dir="rtl"] .slick-prev { left: auto; right: -40px; }
.slick-prev:before { content: ""; }
[dir="rtl"] .slick-prev:before { content: ""; }

.slick-next { right: -40px; padding-left: 0; box-sizing: border-box; }
[dir="rtl"] .slick-next { left: -40px; right: auto; }
.slick-next:before { content: ""; }
[dir="rtl"] .slick-next:before { content: ""; }

/* Dots */
.slick-dots { position: absolute; bottom: 20px; list-style: none; display: block; text-align: center; padding: 0; margin: 0; width: 100%; }
.slick-dots li { position: relative; display: inline-block; width: 20px; height: 20px; margin: 0 2px; padding: 0; cursor: pointer; }
.slick-dots li button { border: 0; background: transparent; display: block; width: 20px; height: 20px; outline: none; line-height: 0px; font-size: 0px; color: transparent; padding: 5px; box-sizing: border-box; cursor: pointer; }
.slick-dots li button:hover, .slick-dots li button:focus { outline: none; }
.slick-dots li button:hover:before, .slick-dots li button:focus:before { color: #333; opacity: 1; }
.slick-dots li button:before { position: absolute; top: 0; left: 0; content: ""; width: 20px; height: 20px; font-family: "fontawesome"; font-size: 16px; line-height: 20px; text-align: center; color: #333; opacity: 0.25; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
.slick-dots li.slick-active button:before { color: #333; opacity: 0.75; }

@media (max-width: 960px) { .slick-prev { left: -20px; }
  [dir="rtl"] .slick-prev { right: -20px; }
  .slick-next { right: -20px; }
  [dir="rtl"] .slick-next { left: -20px; } }
/* breadcrumb */
.breadcrumb-wrap { width: 100%; padding: 100px 20px 0px; box-sizing: border-box; background: #DCDDDD; -moz-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1); -o-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1); -webkit-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1); transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1); }
@media (max-width: 640px){
	.breadcrumb-wrap { width: 100%; padding: 50px 20px 0px}
}


.breadcrumb-wrap ul.breadcrumb li { position: relative; display: inline-block; font-size: 12px; line-height: 20px; }
.breadcrumb-wrap ul.breadcrumb li:first-child { width: 15px; text-indent: -9999px; text-transform: uppercase; }
.breadcrumb-wrap ul.breadcrumb .home:before { content: "\f015"; position: absolute; top: 1px; left: 0; width: 20px; height: 20px; color: #333; text-indent: 0; }
.breadcrumb-wrap ul.breadcrumb .home:hover:before { color: #000; }
.breadcrumb-wrap ul.breadcrumb li.icon a:link, .breadcrumb-wrap ul.breadcrumb li.icon a:visited { color: #333; }
.breadcrumb-wrap ul.breadcrumb li.icon a:hover, .breadcrumb-wrap ul.breadcrumb li.icon a:active { color: #000; }
.breadcrumb-wrap ul.breadcrumb li.icon:before { content: "\f105"; padding: 0 5px; font-size: 16px; }

.inner { background: #fff; }

.products-category { clear: both; width: 100%; margin: 0 auto; padding: 0 20px 20px; 
                     box-sizing: border-box; }
.products-category .item { position: relative; display: inline-block; width: calc(100% / 4 - 20px); 
                           margin-right: 20px; margin-bottom: 20px; vertical-align: top; 
						   overflow: hidden; -moz-box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.5); 
						   -webkit-box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.5); 
						   box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.5); }
.products-category .item:nth-child(4n) { margin-right: 0; }
.products-category .item a:link, .products-category .item a:visited { color: white; }
.products-category .item a:hover, .products-category .item a:active { color: rgba(255, 255, 255, 0.8); }
.products-category .item .title { position: absolute; top: 0; left: 0; z-index: 888; width: 100%; padding: 4px 0; box-sizing: border-box; background: rgba(50, 50, 50, 0.9); font-size: 14px; line-height: 24px; letter-spacing: 1px; color: #fff; font-weight: 500; text-align: center; }
.products-category .item img { padding-top:26px;display: block; max-width: 100%; width: 100%; -moz-transition: all 500ms ease-in-out; -o-transition: all 500ms ease-in-out; -webkit-transition: all 500ms ease-in-out; transition: all 500ms ease-in-out; }
.products-category .item:hover img { -moz-transform: scale(1.1); -ms-transform: scale(1.1); -webkit-transform: scale(1.1); transform: scale(1.1); -moz-transition: all 500ms ease-in-out; -o-transition: all 500ms ease-in-out; -webkit-transition: all 500ms ease-in-out; transition: all 500ms ease-in-out; }
.products-category .item:hover .box-list { opacity: 1; bottom: 0; -moz-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1); -o-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1); -webkit-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1); transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1); }
.products-category .item .box-list { position: absolute; bottom: -20px; left: 0; width: 100%; opacity: 0; padding: 10px 15px; box-sizing: border-box; background: rgba(0, 0, 0, 0.7); -moz-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1); -o-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1); -webkit-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1); transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1); }
.products-category .item .box-list li { display: inline-block; width: calc(50% - 10px); border-top: 1px solid rgba(255, 255, 255, 0.5); margin-right: 15px; font-size: 14px; line-height: 1.8; letter-spacing: 2px; font-weight: bold; }
.products-category .item .box-list li:nth-child(2n) { margin-right: 0; }
.products-category .item .box-list li:nth-child(1), .products-category .item .box-list li:nth-child(2) { border-top: 0; }

.navbar { display: inline-block; width: 160px; margin-top: 10px; vertical-align: top; }
.navbar .navbar-header { width: 100%; padding: 5px 0; font-size: 20px; line-height: 24px; font-weight: bold; text-align: center; }
.navbar .open-navbar { position: relative; display: none; width: 60px; height: 25px; vertical-align: top; margin-left: 5px; padding: 5px 5px; padding-left: 25px; box-sizing: border-box; font-size: 15px; line-height: 1; color: #fff; font-weight: bold; cursor: pointer; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; -moz-box-shadow: inset 0px 0px 3px black; -webkit-box-shadow: inset 0px 0px 3px black; box-shadow: inset 0px 0px 3px black; background: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzRkNGQ0ZCIvPjxzdG9wIG9mZnNldD0iNTAlIiBzdG9wLWNvbG9yPSIjNDU0NTQ1Ii8+PHN0b3Agb2Zmc2V0PSI1MSUiIHN0b3AtY29sb3I9IiMzYzNjM2MiLz48c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiM0ZDRkNGQiLz48L2xpbmVhckdyYWRpZW50PjwvZGVmcz48cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSJ1cmwoI2dyYWQpIiAvPjwvc3ZnPiA='); background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #4d4d4d), color-stop(50%, #454545), color-stop(51%, #3c3c3c), color-stop(100%, #4d4d4d)); background: -moz-linear-gradient(top, #4d4d4d, #454545 50%, #3c3c3c 51%, #4d4d4d); background: -webkit-linear-gradient(top, #4d4d4d, #454545 50%, #3c3c3c 51%, #4d4d4d); background: linear-gradient(to bottom, #4d4d4d, #454545 50%, #3c3c3c 51%, #4d4d4d); }
.navbar .open-navbar:before { content: "\f0c9"; position: absolute; top: 5px; left: 6px; width: 20px; height: 20px; font-size: 14px; color: #fff; }
.navbar .open-navbar:after { content: "展開"; position: absolute; top: 5px; left: 25px; font-size: 15px; color: #fff; }
.navbar .close-navbar { position: relative; display: none; width: 60px; height: 25px; vertical-align: top; margin-left: 5px; padding: 5px 5px; padding-left: 25px; box-sizing: border-box; font-size: 15px; line-height: 1; color: #fff; font-weight: bold; cursor: pointer; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; -moz-box-shadow: inset 0px 0px 3px black; -webkit-box-shadow: inset 0px 0px 3px black; box-shadow: inset 0px 0px 3px black; background: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzRkNGQ0ZCIvPjxzdG9wIG9mZnNldD0iNTAlIiBzdG9wLWNvbG9yPSIjNDU0NTQ1Ii8+PHN0b3Agb2Zmc2V0PSI1MSUiIHN0b3AtY29sb3I9IiMzYzNjM2MiLz48c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiM0ZDRkNGQiLz48L2xpbmVhckdyYWRpZW50PjwvZGVmcz48cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSJ1cmwoI2dyYWQpIiAvPjwvc3ZnPiA='); background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #4d4d4d), color-stop(50%, #454545), color-stop(51%, #3c3c3c), color-stop(100%, #4d4d4d)); background: -moz-linear-gradient(top, #4d4d4d, #454545 50%, #3c3c3c 51%, #4d4d4d); background: -webkit-linear-gradient(top, #4d4d4d, #454545 50%, #3c3c3c 51%, #4d4d4d); background: linear-gradient(to bottom, #4d4d4d, #454545 50%, #3c3c3c 51%, #4d4d4d); }
.navbar .close-navbar:before { content: "\f00d" !important; position: absolute; top: 5px; left: 6px; width: 20px; height: 20px; font-size: 14px; color: #fff; }
.navbar .close-navbar:after { content: "關閉"; position: absolute; top: 5px; left: 25px; font-size: 15px; color: #fff; }
.navbar .navbarOpen { display: inline-block !important; }
.navbar .navbarClose { display: none !important; }
.navbar .productsMenu { width: 100%; border-top: 4px solid #C30D23; -moz-box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.5); -webkit-box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.5); box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.5); -moz-transition: all 1s cubic-bezier(0.42, 0, 0.58, 1); -o-transition: all 1s cubic-bezier(0.42, 0, 0.58, 1); -webkit-transition: all 1s cubic-bezier(0.42, 0, 0.58, 1); transition: all 1s cubic-bezier(0.42, 0, 0.58, 1); }
.navbar .productsMenu .item { width: 100%; }
.navbar .productsMenu .subMenu { display: block; width: 100%; padding: 5px 15px; box-sizing: border-box; font-size: 16px; line-height: 1.6; font-weight: bold; cursor: pointer; 
                               background: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIvPjxzdG9wIG9mZnNldD0iNTAlIiBzdG9wLWNvbG9yPSIjZjRmNGY0Ii8+PHN0b3Agb2Zmc2V0PSI1MSUiIHN0b3AtY29sb3I9IiNlOWU5ZTkiLz48c3RvcCBvZmZzZXQ9Ijk3JSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIvPjxzdG9wIG9mZnNldD0iOTglIiBzdG9wLWNvbG9yPSIjZTZlNmU2Ii8+PC9saW5lYXJHcmFkaWVudD48L2RlZnM+PHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0idXJsKCNncmFkKSIgLz48L3N2Zz4g'); 
							   background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #ffffff), color-stop(50%, #f4f4f4), color-stop(51%, #e9e9e9), color-stop(97%, #ffffff), color-stop(98%, #e6e6e6)); 
							   background: -moz-linear-gradient(top, #ffffff, #f4f4f4 50%, #e9e9e9 51%, #ffffff 97%, #e6e6e6 98%); 
							   background: -webkit-linear-gradient(top, #ffffff, #f4f4f4 80%, #e9e9e9 20%, #ffffff 97%, #e6e6e6 98%); 
							   background: linear-gradient(to bottom, #ffffff, #f4f4f4 80%, #e9e9e9 20%, #ffffff 97%, #e6e6e6 98%); }
.navbar .productsMenu .subMenu:hover { background: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIvPjxzdG9wIG9mZnNldD0iNDklIiBzdG9wLWNvbG9yPSIjZTllOWU5Ii8+PHN0b3Agb2Zmc2V0PSI5OCUiIHN0b3AtY29sb3I9IiNlNmU2ZTYiLz48c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNhYWFhYWEiLz48L2xpbmVhckdyYWRpZW50PjwvZGVmcz48cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSJ1cmwoI2dyYWQpIiAvPjwvc3ZnPiA='); background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #ffffff), color-stop(49%, #e9e9e9), color-stop(98%, #e6e6e6), color-stop(100%, #aaaaaa)); background: -moz-linear-gradient(top, #ffffff, #e9e9e9 49%, #e6e6e6 98%, #aaaaaa); background: -webkit-linear-gradient(top, #ffffff, #e9e9e9 49%, #e6e6e6 98%, #aaaaaa); background: linear-gradient(to bottom, #ffffff, #e9e9e9 49%, #e6e6e6 98%, #aaaaaa); }
.navbar .productsMenu .itemList { display: none; background: #Efefef; }
.navbar .productsMenu .itemList li { position: relative; font-size: 15px; line-height: 1.6; font-weight: bold; }
.navbar .productsMenu .itemList li:hover { background-color: #dcdcdc; }
.navbar .productsMenu .itemList li:before { position: absolute; top: 3px; left: 10px; width: 16px; height: 20px; content: "\f105"; padding: 0 5px; font-size: 16px; color: #C30D23; }
.navbar .productsMenu .itemList li:last-child { padding-bottom: 5px; }
.navbar .productsMenu .itemList li a { display: block; width: 100%; padding: 4px; padding-left: 26px; box-sizing: border-box; }
.navbar .productsMenu .itemList li a:link, .navbar .productsMenu .itemList li a:visited { color: #333; }
.navbar .productsMenu .itemList li a:hover, .navbar .productsMenu .itemList li a:active { color: #C30D23; }
.navbar .productsMenu .menu-opened { display: block; }

.products-container { display: inline-block; width: calc(100% - 165px); margin-top: 10px; padding-left: 20px; box-sizing: border-box; }
.products-container .products-wrap { background-color: transparent; }
.products-container .products-wrap .products-category { padding: 0 5px 30px 0; }

.products-search { display: block; width: 100%; }
.products-search .title { position: relative; z-index: 2; width: 160px; margin-top: 5px; margin-left: 20px; background: #fff; padding: 0 10px; box-sizing: border-box; font-size: 20px; line-height: 1; letter-spacing: .5rem; font-weight: bold; }
.products-search .title span { position: absolute; top: 20px; left: 5px; font-size: 13px; color: #C30D23; letter-spacing: 0; background: #fff; padding: 0 5px; }
.products-search .search-box { position: relative; margin-top: 10px; border: 1px solid #ccc; padding: 20px 20px 5px; box-sizing: border-box; }
.products-search .search-box .search-form { display: inline-block; width: calc(100% - 95px); vertical-align: top; }
.products-search .search-box .search-btn { position: relative; display: inline-block; width: 90px; height: 80px; vertical-align: top; padding-top: 33px; box-sizing: border-box; color: #fff; font-weight: bold; text-transform: uppercase; text-align: center; border: 0; outline: none; cursor: pointer; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; -moz-box-shadow: inset 0px 0px 3px black; -webkit-box-shadow: inset 0px 0px 3px black; box-shadow: inset 0px 0px 3px black; background: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzYyNjI2MiIvPjxzdG9wIG9mZnNldD0iMzAlIiBzdG9wLWNvbG9yPSIjM2MzYzNjIi8+PHN0b3Agb2Zmc2V0PSI1MSUiIHN0b3AtY29sb3I9IiMzMjMyMzIiLz48c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMzYzNjM2MiLz48L2xpbmVhckdyYWRpZW50PjwvZGVmcz48cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSJ1cmwoI2dyYWQpIiAvPjwvc3ZnPiA='); background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #626262), color-stop(30%, #3c3c3c), color-stop(51%, #323232), color-stop(100%, #3c3c3c)); background: -moz-linear-gradient(top, #626262, #3c3c3c 30%, #323232 51%, #3c3c3c); background: -webkit-linear-gradient(top, #626262, #3c3c3c 30%, #323232 51%, #3c3c3c); background: linear-gradient(to bottom, #626262, #3c3c3c 30%, #323232 51%, #3c3c3c); }
.products-search .search-box .search-btn:before { content: "\f002"; position: absolute; top: 50%; left: 50%; width: 20px; height: 20px; margin-left: -10px; margin-top: -23px; color: #fff; }
.products-search .search-box .search-btn:hover { background: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzRkNGQ0ZCIvPjxzdG9wIG9mZnNldD0iNTAlIiBzdG9wLWNvbG9yPSIjNDU0NTQ1Ii8+PHN0b3Agb2Zmc2V0PSI1MSUiIHN0b3AtY29sb3I9IiMzYzNjM2MiLz48c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiM0ZDRkNGQiLz48L2xpbmVhckdyYWRpZW50PjwvZGVmcz48cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSJ1cmwoI2dyYWQpIiAvPjwvc3ZnPiA='); background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #4d4d4d), color-stop(50%, #454545), color-stop(51%, #3c3c3c), color-stop(100%, #4d4d4d)); background: -moz-linear-gradient(top, #4d4d4d, #454545 50%, #3c3c3c 51%, #4d4d4d); background: -webkit-linear-gradient(top, #4d4d4d, #454545 50%, #3c3c3c 51%, #4d4d4d); background: linear-gradient(to bottom, #4d4d4d, #454545 50%, #3c3c3c 51%, #4d4d4d); }
.products-search .search-box:after { content: ""; position: absolute; bottom: 0; right: 0; width: 0; height: 0; border-style: solid; border-width: 0 0 20px 20px; border-color: transparent transparent #C30D23 transparent; }

.form-container .form-field { position: relative; display: inline-block; width: calc(50% - 15px); font-size: 16px; line-height: 1; color: #333; font-weight: bold; margin-bottom: 15px; margin-right: 10px; }
.form-container .form-field.required:before { position: absolute; margin:10px 5px 0 4px ;padding-right:2px;content: "*"; width: 14px; height: 14px; font-size: 18px; font-weight: bold; color: #C30D23; }
.form-container .field-label { display: inline-block; vertical-align: top; width: 85px; padding: 8px 10px; box-sizing: border-box; }
.form-container .field-desc { display: inline-block; vertical-align: top; width: calc(100% - 95px); background: #f2f2f2; border: 0; padding: 6px 14px; box-sizing: border-box; font-family: "微軟正黑體", sans-serif; font-size: 16px; font-weight:500; -moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px; outline: none; -moz-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1); -o-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1); -webkit-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1); transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1); }
.form-container .field-desc::-webkit-input-placeholder { color: #555; -moz-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1); -o-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1); -webkit-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1); transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1); }
.form-container .field-desc:-moz-placeholder { color: #555; }
.form-container .field-desc::-moz-placeholder { color: #555; }
.form-container .field-desc:-ms-input-placeholder { color: #555; }
.form-container .field-desc:hover { color: #333; background: rgba(230, 230, 230, 0.5); -moz-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1); -o-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1); -webkit-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1); transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1); }
.form-container .field-desc:hover::-webkit-input-placeholder { color: #333; -moz-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1); -o-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1); -webkit-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1); transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1); }
.form-container .field-desc:hover:-moz-placeholder { color: #333; }
.form-container .field-desc:hover::-moz-placeholder { color: #333; }
.form-container .field-desc:hover:-ms-input-placeholder { color: #333; }
.form-container .field-desc:hover:focus::-webkit-input-placeholder { -moz-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1); -o-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1); -webkit-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1); transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1); color: rgba(85, 85, 85, 0.5); }
.form-container .field-desc:hover:focus:-moz-placeholder { color: rgba(85, 85, 85, 0.5); }
.form-container .field-desc:hover:focus::-moz-placeholder { color: rgba(85, 85, 85, 0.5); }
.form-container .field-desc:hover:focus:-ms-input-placeholder { color: rgba(85, 85, 85, 0.5); }
.form-container .field-desc.select { padding: 5px; border: 0; cursor: pointer; }
.form-container .field-desc.w100 { width: 100%; }
.form-container .field-desc.textarea { width: 100% !important;}
.form-container .field-desc.ucode { display: inline-block; vertical-align: top; width: 145px !important; }
.form-container .getcode { display: inline-block; vertical-align: top; margin: 1px 5px; height: 30px; }
.form-container .reset { display: inline-block; vertical-align: top; height: 30px; margin: 1px; }

.categoryTitle { clear: both; display: block; width: 100%; padding-top: 30px; padding-bottom: 10px; }
.categoryTitle .title { position: relative; width: 280px; margin: auto; font-size: 22px; line-height: 35px; font-weight: bold; text-align: center; padding-bottom: 3px; padding-left: 5px; border-bottom: 5px solid #222; }
.categoryTitle .title:before { content: ""; position: absolute; bottom: -5px; right: 0; width: 50%; height: 5px; background: #C8A062; }
.categoryTitle .title span { letter-spacing: 1px; }
.categoryTitle a:link, .categoryTitle a:visited { color: #880000;font-size:16px;font-weight:600;background:url("../images/icon-tit.svg") no-repeat;padding-left:20px;}
.categoryTitle a:hover, .categoryTitle a:active { color: rgba(0, 0, 0, 0.8); }

.products-content { background: #DCDDDD; }
.products-content .products-header { position: relative; width: 100%; padding: 8px 0; box-sizing: border-box; font-size: 22px; line-height: 1.5; color: #fff; font-weight: bold; text-align: center; background: #c8a062; }
.products-content .products-header .title { width: calc(100% - 150px); }
.products-content .products-header .inquiry-btn { position: absolute; right: 12px; top: 12px; width: 140px; padding: 8px 15px 8px 25px; box-sizing: border-box; font-size: 18px; line-height: 20px; background: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzFhMWExYSIvPjxzdG9wIG9mZnNldD0iNTAlIiBzdG9wLWNvbG9yPSIjM2MzYzNjIi8+PHN0b3Agb2Zmc2V0PSI1MSUiIHN0b3AtY29sb3I9IiMwMDAwMDAiLz48c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMxYTFhMWEiLz48L2xpbmVhckdyYWRpZW50PjwvZGVmcz48cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSJ1cmwoI2dyYWQpIiAvPjwvc3ZnPiA='); background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #1a1a1a), color-stop(50%, #3c3c3c), color-stop(51%, #000000), color-stop(100%, #1a1a1a)); background: -moz-linear-gradient(top, #1a1a1a, #3c3c3c 50%, #000000 51%, #1a1a1a); background: -webkit-linear-gradient(top, #1a1a1a, #3c3c3c 50%, #000000 51%, #1a1a1a); background: linear-gradient(to bottom, #1a1a1a, #3c3c3c 50%, #000000 51%, #1a1a1a); }
.products-content .products-header .inquiry-btn:before { content: "\f044"; position: absolute; top: 9px; left: 8px; width: 20px; height: 20px; color: #fff; }
.products-content .products-header .inquiry-btn:after { content: ""; position: absolute; bottom: 0; right: 0; width: 0; height: 0; border-style: solid; border-width: 0 0 12px 12px; border-color: transparent transparent #C30D23 transparent; }
.products-content .products-header .inquiry-btn a:link, .products-content .products-header .inquiry-btn a:visited { color: #fff; }
.products-content .products-header .inquiry-btn a:hover, .products-content .products-header .inquiry-btn a:active { color: #fff; }
.products-content .products-header .inquiry-btn:hover { background: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzYyNjI2MiIvPjxzdG9wIG9mZnNldD0iMzAlIiBzdG9wLWNvbG9yPSIjM2MzYzNjIi8+PHN0b3Agb2Zmc2V0PSI1MSUiIHN0b3AtY29sb3I9IiMzMjMyMzIiLz48c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMzYzNjM2MiLz48L2xpbmVhckdyYWRpZW50PjwvZGVmcz48cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSJ1cmwoI2dyYWQpIiAvPjwvc3ZnPiA='); background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #626262), color-stop(30%, #3c3c3c), color-stop(51%, #323232), color-stop(100%, #3c3c3c)); background: -moz-linear-gradient(top, #626262, #3c3c3c 30%, #323232 51%, #3c3c3c); background: -webkit-linear-gradient(top, #626262, #3c3c3c 30%, #323232 51%, #3c3c3c); background: linear-gradient(to bottom, #626262, #3c3c3c 30%, #323232 51%, #3c3c3c); -moz-transition: all 500ms ease-in-out; -o-transition: all 500ms ease-in-out; -webkit-transition: all 500ms ease-in-out; transition: all 500ms ease-in-out; }

.products-info { position: relative; width: 100%; padding: 20px 10px; box-sizing: border-box; }
.products-info .info-list { display: inline-block; vertical-align: top; width: calc(100% - 700px - 15px); margin-left: 10px; }
.products-info .info-list li { width: 100%; margin-bottom: 6px; font-size: 18px; line-height: 24px; color: #444; font-weight: bold; text-align: center; }
.products-info .info-list li.title { padding: 10px 5px; box-sizing: border-box; color: #fff; background: #898989; letter-spacing: .5rem; -moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px; }
.products-info .info-list li.column-2 .type { display: inline-block; vertical-align: top; width: 100px; min-height: 34px; margin-right: 2px; background: #fff; padding: 10px 5px; box-sizing: border-box; letter-spacing: .5rem; -moz-border-radius: 8px; -webkit-border-radius: 3px; border-radius: 3px; }
.products-info .info-list li.column-2 .type.spacing { letter-spacing: 0; }
.products-info .info-list li.column-2 .text { display: inline-block; vertical-align: top; width: calc(100% - 110px); min-height: 34px; background: #fff; padding: 10px 5px; box-sizing: border-box; font-size: 18px; line-height: 24px; color: #444; font-weight: bold; -moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px; }
.products-info .info-list li.column-1 { display: block; width: 100%; min-height: 58px; background: #fff; padding: 5px; box-sizing: border-box; -moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px; font-size: 16px; color: #444; font-weight: bold; text-align: left; }
.products-info .info-list li.column-1 .type { display: inline-block; }
.products-info .info-list li.column-1 .text { display: inline-block; }
.products-info .gallery { position: relative; display: inline-block; vertical-align: top; width: 100%; max-width: 700px; margin: 0 auto; }

/* Elastislide Carousel Style */
*, *:after, *:before { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; padding: 0; margin: 0; }

.products-set { width: 100%; padding: 10px 10px 20px; box-sizing: border-box; }
.products-set .title { width: 100%; margin-bottom: 20px; padding: 5px; box-sizing: border-box; font-size: 20px; line-height: 1.5; color: #fff; font-weight: bold; text-align: center; -moz-border-radius: 8px; -webkit-border-radius: 8px; border-radius: 8px; 
    background: #c8a062;}
.products-set li { display: inline-block; vertical-align: top; width: calc(100% / 5 - 17px); margin-right: 15px; margin-bottom: 20px; background: #888; padding: 10px; box-sizing: border-box; -moz-border-radius: 8px; -webkit-border-radius: 8px; border-radius: 8px; }
.products-set li:nth-child(5n) { margin-right: 0; }
.products-set li .photo { position: relative; }
.products-set li .photo img { width: 100%; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; }
.products-set li .rollover { position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: .3; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; -moz-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1); -o-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1); -webkit-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1); transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1); }
.products-set li .rollover:before { content: ""; position: absolute; bottom: 15px; right: 15px; width: 36px; height: 36px; background: url("../images/search-plus.svg"); }
.products-set li .rollover:hover { opacity: 1; -moz-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1); -o-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1); -webkit-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1); transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1); }
.products-set li h4 { padding: 10px 0; font-size: 20px; color: #fff; font-weight: bold; text-align: center; }
.products-set .inquiry-btn { position: relative; display: block; width: 180px; margin: 10px auto; padding: 8px 15px 8px 25px; box-sizing: border-box; font-size: 18px; line-height: 20px; text-align: center; background: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzFhMWExYSIvPjxzdG9wIG9mZnNldD0iNTAlIiBzdG9wLWNvbG9yPSIjM2MzYzNjIi8+PHN0b3Agb2Zmc2V0PSI1MSUiIHN0b3AtY29sb3I9IiMwMDAwMDAiLz48c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMxYTFhMWEiLz48L2xpbmVhckdyYWRpZW50PjwvZGVmcz48cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSJ1cmwoI2dyYWQpIiAvPjwvc3ZnPiA='); background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #1a1a1a), color-stop(50%, #3c3c3c), color-stop(51%, #000000), color-stop(100%, #1a1a1a)); background: -moz-linear-gradient(top, #1a1a1a, #3c3c3c 50%, #000000 51%, #1a1a1a); background: -webkit-linear-gradient(top, #1a1a1a, #3c3c3c 50%, #000000 51%, #1a1a1a); background: linear-gradient(to bottom, #1a1a1a, #3c3c3c 50%, #000000 51%, #1a1a1a); }
.products-set .inquiry-btn:before { content: "\f044"; position: absolute; top: 9px; left: 8px; width: 20px; height: 20px; color: #fff; }
.products-set .inquiry-btn:after { content: ""; position: absolute; bottom: 0; right: 0; width: 0; height: 0; border-style: solid; border-width: 0 0 12px 12px; border-color: transparent transparent #C30D23 transparent; }
.products-set .inquiry-btn a:link, .products-set .inquiry-btn a:visited { color: #fff; }
.products-set .inquiry-btn a:hover, .products-set .inquiry-btn a:active { color: #fff; }
.products-set .inquiry-btn:hover { background: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzYyNjI2MiIvPjxzdG9wIG9mZnNldD0iMzAlIiBzdG9wLWNvbG9yPSIjM2MzYzNjIi8+PHN0b3Agb2Zmc2V0PSI1MSUiIHN0b3AtY29sb3I9IiMzMjMyMzIiLz48c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMzYzNjM2MiLz48L2xpbmVhckdyYWRpZW50PjwvZGVmcz48cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSJ1cmwoI2dyYWQpIiAvPjwvc3ZnPiA='); background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #626262), color-stop(30%, #3c3c3c), color-stop(51%, #323232), color-stop(100%, #3c3c3c)); background: -moz-linear-gradient(top, #626262, #3c3c3c 30%, #323232 51%, #3c3c3c); background: -webkit-linear-gradient(top, #626262, #3c3c3c 30%, #323232 51%, #3c3c3c); background: linear-gradient(to bottom, #626262, #3c3c3c 30%, #323232 51%, #3c3c3c); }

.related-products { clear: both; display: block; background: #ddd; padding-top: 20px; margin-top: 20px; }

.inquiry-wrap { width: 68%; margin: 0 auto; }
.inquiry-wrap .remark { font-size: 18px; font-weight: bold; }
.inquiry-wrap .remark .red { font-size: 16px; color: #C30D23; }
.inquiry-wrap .inquiry-form { padding: 20px; box-sizing: border-box; background: #F4F4F4; }
.inquiry-wrap .form-container .form-field.w100 { display: block; width: 98%; margin-right: 0; }
.inquiry-wrap .form-container .field-label { display: inline-block; width: 85px; padding: 8px 10px; box-sizing: border-box; }
.inquiry-wrap .form-container .field-desc { background: #fff; }
.inquiry-wrap .form-container .field-text { display: inline-block; vertical-align: top; width: calc(100% - 95px); border: 0; padding: 6px 10px; box-sizing: border-box; font-family: "微軟正黑體", sans-serif; font-size: 18px; color: #C30D23; font-weight: bold; -moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px; }

.cases-wrap { clear: both; display: block; background: #ddd; padding-top: 25px; }

.cases-list { width: 96%; margin: 0 auto; min-height:300px; }
.cases-list .item { position: relative; display: inline-block; width: calc(100% / 3 - 20px); margin-right: 25px; margin-bottom: 25px; vertical-align: top; }
.cases-list .item:nth-child(3n) { margin-right: 0; }
.cases-list .item a:link, .cases-list .item a:visited { color: white; }
.cases-list .item a:hover, .cases-list .item a:active { color: rgba(255, 255, 255, 0.8); }
.cases-list .item .casesImg { position: relative; display: block; width: 100%; overflow: hidden; line-height: 0; }
.cases-list .item .newsCase {background-color:#c8a062; padding:3px;font-size:16px;}
.cases-list .item .casesImg img { display: block; max-width: 100%; width: 100%; -moz-transition: all 500ms ease-in-out; -o-transition: all 500ms ease-in-out; -webkit-transition: all 500ms ease-in-out; transition: all 500ms ease-in-out; line-height: 0; }
.cases-list .item .casesImg:hover img { -moz-transform: scale(1.1); -ms-transform: scale(1.1); -webkit-transform: scale(1.1); transform: scale(1.1); -moz-transition: all 500ms ease-in-out; -o-transition: all 500ms ease-in-out; -webkit-transition: all 500ms ease-in-out; transition: all 500ms ease-in-out; }
.cases-list .item .casesTitle { position: absolute; bottom: 0; left: 0; z-index: 999; display: block; width: 100%; height: 30px; overflow: hidden; background: #111; padding-left: 6px; border-left: 6px solid #C30D23; box-sizing: border-box; font-size: 14px; line-height: 30px; color: #fff; font-weight: bold; }

/* pager */
.pagination { width: 100%; overflow: hidden; padding: 20px 0 36px 0px; text-align: center; }
.pagination ul { list-style: none; }
.pagination ul li { display: inline; font-size: 12pt; line-height: 24px; margin-right: 5px; font-weight: bold; }
.pagination ul li a,.pagination ul li span { text-decoration: none; padding: 6px 12px; color: #929292; border: 1px solid #cccccc; background-color: #ffffff}
.pagination ul li a:hover { color: #000; border: 1px solid #000;}
.pagination ul li.current { color: #000; }
.pagination ul li.current a { color: #000; background-color: #f0f0f0}
.pagination ul li.disabled { color: #929292; }
.pagination ul li:first-child a, .pagination ul li:last-child a { color: #000; }
.pagination ul li:first-child a:hover, .pagination ul li:first-child a:active, .pagination ul li:last-child a:hover, .pagination ul li:last-child a:active { background-color: inherit; }
.pagination.gray-paper { background: #ddd; }
.pagination .double-left:before { content: "\f100"; font-size: 13px; vertical-align: top; }
.pagination .left-arrow { margin-right: 15px; }
.pagination .left-arrow:before { content: "\f053"; font-size: 13px; vertical-align: top; }
.pagination .right-arrow { margin-left: 10px; }
.pagination .right-arrow:after { content: "\f054"; font-size: 13px; vertical-align: top; padding: 0; padding-left: 0.5em; }
.pagination .double-right:after { content: "\f101"; font-size: 13px; vertical-align: top; padding: 0; padding-left: 0.5em; }

.detailTitle { position: relative; padding-top: 20px; }
.detailTitle.gray { background: #ddd; margin-bottom: 0; }
.detailTitle h2 { position: relative; width: 90%; margin: 0 auto; text-align: left; }
.detailTitle .share { position: absolute; right: 0; top: 0; text-align: right; }

.cases-gallery { clear: both; width: 93%; margin: 0 auto; padding-bottom: 50px; }
.cases-gallery .item { position: relative; margin: 0px 15px; overflow: hidden; }
.cases-gallery .item img { display: block; max-width: 100%; width: 100%; -moz-transition: all 500ms ease-in-out; -o-transition: all 500ms ease-in-out; -webkit-transition: all 500ms ease-in-out; transition: all 500ms ease-in-out; }
.cases-gallery .slick-prev, .cases-gallery .slick-next { width: 40px; height: 40px; margin-top: -20px; background: rgba(255, 255, 255, 0.5); -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; }
.cases-gallery .slick-prev:before, .cases-gallery .slick-next:before { font-size: 50px; color: #000; }
.cases-gallery .slick-prev { left: 20px; }
.cases-gallery .slick-next { right: 20px; }
.cases-gallery .slick-dots li button:before { color: #C30D23; }

.cases-info { width: 90%; margin: 0 auto; padding-bottom: 30px; }
.cases-info h3 { z-index: 2; margin-left: 25px; margin-bottom: -18px; font-size: 22px; line-height: 1.5; font-weight: bold; text-transform: uppercase; letter-spacing: .5rem; }
.cases-info h3 span { background: #ddd; padding: 0 20px; box-sizing: border-box; color: #880000;}
.cases-info .text { padding: 20px; box-sizing: border-box; border: 1px solid #333; font-size: 17px; line-height: 1.6; font-weight: bold; letter-spacing: .1rem; }

.unit-wrap { clear: both; display: block; background: #ddd; padding-top: 20px; }
.unit-wrap .slick-dots { bottom: 5px; }

.unit-list { clear: both; width: 93%; margin: 0 auto; padding-bottom: 40px; }
.unit-list .item { position: relative; margin: 0px 15px; padding: 10px; box-sizing: border-box; overflow: hidden; background: #fff; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px; }
.unit-list .item .title { position: absolute; bottom: 0; left: 0; z-index: 888; width: 100%; padding: 10px 0; box-sizing: border-box; background: #fff; font-size: 17px; line-height: 1.6; letter-spacing: .05rem; color: #000; font-weight: bold; text-align: center; }
.unit-list .item img { display: block; max-width: 100%; width: 100%; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; -moz-transition: all 500ms ease-in-out; -o-transition: all 500ms ease-in-out; -webkit-transition: all 500ms ease-in-out; transition: all 500ms ease-in-out; }
.unit-list .slick-prev, .unit-list .slick-next { width: 40px; height: 40px; margin-top: -20px; background: #fff; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; }
.unit-list .slick-prev:before, .unit-list .slick-next:before { font-size: 50px; color: #000; }
.unit-list .slick-prev { left: 0; }
.unit-list .slick-next { right: 0; }
.unit-list .slick-dots li button:before { color: #C30D23; }

.btn-back { display: block; padding-top: 20px; line-height: 36px; text-align: center; }
.btn-back a:link, .btn-back a:visited { position: relative; padding: 6px 12px; padding-left: 36px; box-sizing: border-box; background: #111; font-size: 17px; line-height: 1; letter-spacing: .2rem; color: #fff; font-weight: bold; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; -moz-box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.3); -webkit-box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.3); box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.3); -moz-transition: all 200ms ease-in-out; -o-transition: all 200ms ease-in-out; -webkit-transition: all 200ms ease-in-out; transition: all 200ms ease-in-out; }
.btn-back a:link:before, .btn-back a:visited:before { position: absolute; top: 9px; left: 8px; content: "\f137"; padding: 0 5px; font-size: 18px; color: #fff; }
.btn-back a:hover, .btn-back a:active { color: #fff; background: #333; -moz-box-shadow: inset 0px 0px 5px black; -webkit-box-shadow: inset 0px 0px 5px black; box-shadow: inset 0px 0px 5px black; -moz-box-shadow: -1px -1px 5px rgba(0, 0, 0, 0.5); -webkit-box-shadow: -1px -1px 5px rgba(0, 0, 0, 0.5); box-shadow: -1px -1px 5px rgba(0, 0, 0, 0.5); -moz-transition: all 200ms ease-in-out; -o-transition: all 200ms ease-in-out; -webkit-transition: all 200ms ease-in-out; transition: all 200ms ease-in-out; }
.btn-back.gray { background: #ddd; padding-bottom: 30px; }
.btn-back.right { text-align: right; }

.leftBox { display: inline-block; vertical-align: top; width: 200px; }

.rightBox { display: inline-block; vertical-align: top; width: calc(100% - 220px); margin-left: 15px; }

.page-container { width: 100%; margin: auto; padding: 20px; padding-top: 0; box-sizing: border-box; }
.page-container.line { width: 90%; margin: auto; border: 1px solid #ddd; padding-top: 20px; }
.page-container.w900 { width: 90%; margin: auto; padding: 0; }
.page-container .navMenu { display: block; width: 100%; }
.page-container .navMenu .item { display: block; width: 100%; margin-bottom: 5px; border-left: 8px solid #C30D23; }
.page-container .navMenu .item a:link, .page-container .navMenu .item a:visited { display: block; padding: 10px 15px; background: #DCDDDD; font-size: 20px; line-height: 1.5; letter-spacing: .2rem; color: #000; font-weight: bold; -moz-transition: all 200ms ease-in-out; -o-transition: all 200ms ease-in-out; -webkit-transition: all 200ms ease-in-out; transition: all 200ms ease-in-out; }
.page-container .navMenu .item a:hover, .page-container .navMenu .item a:active { background: #000; color: #fff; -moz-transition: all 200ms ease-in-out; -o-transition: all 200ms ease-in-out; -webkit-transition: all 200ms ease-in-out; transition: all 200ms ease-in-out; }
.page-container .navMenu .item a.current { background: #000; color: #fff; }
.page-container .news-list { display: block; width: 100%; }
.page-container .news-list li { display: block; width: 100%; margin-bottom: 5px; }
.page-container .news-list li a:link, .page-container .news-list li a:visited { 
         display: block; padding: 10px 15px; margin-bottom:15px;background: #eaeaea; 
         font-size: 18px; line-height: 1.5; letter-spacing: .1rem; 
         color: #222; font-weight: 600; 
		 -moz-transition: all 200ms ease-in-out; -o-transition: all 200ms ease-in-out; 
		 -webkit-transition: all 200ms ease-in-out; transition: all 200ms ease-in-out; }
.page-container .news-list li a:hover, .page-container .news-list li a:active { background: #000; color: #fff; -moz-transition: all 200ms ease-in-out; -o-transition: all 200ms ease-in-out; -webkit-transition: all 200ms ease-in-out; transition: all 200ms ease-in-out; }

.news-gallery { display: inline-block; vertical-align: top; width: 320px; }

.news-content { display: inline-block; vertical-align: top; width: calc(100% - 340px); margin-left: 15px; }
.news-content h3 { font-size: 20px; line-height: 1.4; font-weight: bold; }
.news-content .date { font-size: 14px; line-height: 1.5; color: #c8a062; }
.news-content .text { margin-top: 15px; margin-bottom: 30px; font-size: 15px; line-height: 1.8; font-weight: bold; }

.knowledge-info .title { position: relative; z-index: 2; margin-left: 25px; margin-bottom: -15px; font-size: 20px; line-height: 1.5; font-weight: bold; text-transform: uppercase; letter-spacing: .2rem; }
.knowledge-info .title span { position: relative; padding: 10px; padding-left: 35px; box-sizing: border-box; background: #fff; }
.knowledge-info .title span:before { content: ""; position: absolute; top: 5px; left: 0; width: 30px; height: 30px; background: url("../images/icon-q.svg"); background-position: center center; }
.knowledge-info .text { padding: 20px 15px; box-sizing: border-box; border: 1px solid #ddd; font-size: 16px; line-height: 1.6; font-weight: bold; }

.knowledge-list { display: block; width: 100%; }
.knowledge-list li { position: relative; display: block; width: 100%; margin-bottom: 20px; }
.knowledge-list li .title { z-index: 2; margin-left: 20px; margin-bottom: -15px; font-size: 20px; line-height: 1.5; font-weight: bold; text-transform: uppercase; letter-spacing: .2rem; }
.knowledge-list li .title span { position: relative; padding: 10px; padding-left: 35px; box-sizing: border-box; background: #fff; }
.knowledge-list li .title span:before { content: ""; position: absolute; top: 8px; left: 0; width: 30px; height: 30px; background: url("../images/icon-q2.svg"); background-position: center center; }
.knowledge-list li .text { padding: 20px 15px; box-sizing: border-box; border: 1px solid #c8a062; font-size: 16px; line-height: 1.6; font-weight: bold; margin-bottom:40px;}
.knowledge-list li .overflow { height: auto; overflow: hidden; margin-bottom: 10px;margin-top:20px; }
.knowledge-list li .more { position: absolute; bottom: 0; right: 0; width: 80px; padding: 0 15px; font-size: 14px; line-height: 2; color: #C30D23; font-weight: bold; -moz-transition: all 200ms ease-in-out; -o-transition: all 200ms ease-in-out; -webkit-transition: all 200ms ease-in-out; transition: all 200ms ease-in-out; }
.knowledge-list li .more:before { position: absolute; top: 2px; right: 0; content: "\f054"; font-size: 12px; color: #C30D23; }
.knowledge-list li .more:hover { background: #000; color: #fff; -moz-transition: all 200ms ease-in-out; -o-transition: all 200ms ease-in-out; -webkit-transition: all 200ms ease-in-out; transition: all 200ms ease-in-out; }

.top-banner { position: relative; line-height: 0; height: 160px;margin-top:0px; background-size: cover;background-position:center center;}
@media (max-width: 1024px){
   .top-banner { position: relative; line-height: 0; height: 160px;margin-top:0px; }
}
.top-banner.about-img { background-image: url("../images/about-banner.jpg"); }
.top-banner.service-img { background: url("../images/service-banner.jpg") center center no-repeat; }
.top-banner.service-img .title span.en { letter-spacing: .5rem; }
.top-banner.process-img { background: url("../images/process-banner.jpg") center center no-repeat; }
.top-banner.contact-img { background-image: url("../images/contact-banner.jpg"); }
.top-banner .title { position: absolute; top: 35%; left: 0; width: 100%; font-size: 16px; color: #fff;
           text-shadow:2px 2px 2px #666;
           line-height: 1; text-align: center; }
.top-banner .title span.en { font-size: 1.8rem; text-transform: uppercase; }
.top-banner .title span.ch { display: block; margin-top: 5px; font-size: 1.5rem; letter-spacing: .5rem; font-weight: bold; }

.top-menu { margin-top: 20px; }

.service-wrap { width: 80%; margin: 0 auto; padding: 20px; box-sizing: border-box; }
.service-wrap .item { margin-top: 30px; text-align: center; display: -webkit-flex; display: -moz-flex; display: -webkit-flex; display: flex; -webkit-align-items: center; -moz-align-items: center; -ms-align-items: center; -ms-flex-item-align: center; align-items: center; }
.service-wrap .item .photo { display: inline-block; vertical-align: top; line-height: 0; border: 10px solid #F0F0E9; -moz-border-radius: 200px; -webkit-border-radius: 200px; border-radius: 200px; }
.service-wrap .item .photo img { width: 100%; -moz-border-radius: 200px; -webkit-border-radius: 200px; border-radius: 200px; }
.service-wrap .item .info { display: inline-block; vertical-align: top; width: calc(100% - 390px); margin-left: 40px; text-align: left; }
.service-wrap .item .info.small { width: 320px; }
.service-wrap .item .info .title-en { font-size: 60px; line-height: .8; color: #F0F0E9; text-transform: uppercase; }
.service-wrap .item .info .title-en span { display: block; }
.service-wrap .item .info .title-en .small { font-size: 36px; }
.service-wrap .item .info .title { margin-top: 20px; font-size: 26px; line-height: 1.5; color: #333; letter-spacing: .5rem; font-weight: bold; }
.service-wrap .item .info .text { margin-top: 20px; font-size: 16px; line-height: 2; letter-spacing: .1rem; font-weight: bold; }
.service-wrap .item.reverse { padding-right: 50px; box-sizing: border-box; display: -webkit-flex; display: -moz-flex; display: -webkit-flex; display: flex; -webkit-flex-flow: row-reverse nowrap; flex-flow: row-reverse nowrap; }

.process-wrap { width: 85%; margin: 0 auto; padding: 20px; box-sizing: border-box; text-align: center; }
.process-wrap img { width: 100%; }

.contact-wrap { width: 100%; padding: 30px; box-sizing: border-box; }
.contact-wrap .company-info { display: inline-block; vertical-align: top; width: 50%; margin-bottom: 30px; }
.contact-wrap .company-info h2 { text-align: center; }
.contact-wrap .company-info h2 span { padding: 0 20px; background: #fff; font-size: 26px; line-height: 1.5; font-weight: bold; color: #c8a062; }
.contact-wrap .company-info h2 span.ch { letter-spacing: .3rem; }
.contact-wrap .company-info h2 span.en { display: block; font-size: 14px; margin-left: -4px; }
.contact-wrap .company-info .info { margin-top: -35px; border: 1px solid #ccc; padding: 20px 30px; padding-top: 50px; box-sizing: border-box; }
.contact-wrap .company-info .info li { position: relative; padding: 5px; padding-left: 35px; box-sizing: border-box; font-size: 18px; line-height: 1.5; font-weight: bold; }
.contact-wrap .company-info .info li:before { content: ""; position: absolute; top: 6px; left: 0; width: 24px; height: 24px; background: url("../images/icon-map.svg") center center no-repeat; }
.contact-wrap .company-info .info li:nth-child(2):before { background-image: url("../images/icon-telephone.svg"); }
.contact-wrap .company-info .info li:nth-child(3):before { background-image: url("../images/icon-fax.svg"); }
.contact-wrap .company-info .info li:nth-child(4):before { background-image: url("../images/icon-email.svg"); }
.contact-wrap .company-info .info li:nth-child(5):before { background-image: url("../images/icon-web.svg"); }
.contact-wrap .company-info .info li:nth-child(6):before { background-image: url("../images/icon-clock.svg"); }
.contact-wrap .company-info .info li .work { display: block; }
.contact-wrap .contact-form { display: inline-block; vertical-align: top; width: calc(50% - 20px); margin-left: 15px; margin-bottom: 30px; }
.contact-wrap .contact-form .remark { margin-left: -8px; padding: 10px; box-sizing: border-box; font-size: 16px; font-weight: bold; color: #C30D23; }
.contact-wrap .form-container .form-field { width: 100%; margin: 0; margin-bottom: 10px; }
.contact-wrap .form-container .field-desc { width: 100%; }

.btn-wrap { display: block; padding-top: 20px; line-height: 36px; text-align: center; }
.btn-wrap .btn { position: relative; padding: 8px 12px; padding-left: 36px; box-sizing: border-box; border: 0; outline: none; background: #ccc; font-family: "微軟正黑體", sans-serif; font-size: 17px; line-height: 1; letter-spacing: .2rem; font-weight: bold; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; -moz-box-shadow: 0 0 5px rgba(0, 0, 0, 0.5); -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.5); box-shadow: 0 0 5px rgba(0, 0, 0, 0.5); -moz-transition: all 200ms ease-in-out; -o-transition: all 200ms ease-in-out; -webkit-transition: all 200ms ease-in-out; transition: all 200ms ease-in-out; }
.btn-wrap .btn:before { content: ""; position: absolute; top: 5px; left: 8px; width: 24px; height: 24px; }
.btn-wrap .btn:hover { color: #000; -moz-transition: all 200ms ease-in-out; -o-transition: all 200ms ease-in-out; -webkit-transition: all 200ms ease-in-out; transition: all 200ms ease-in-out; }
.btn-wrap .reset { color: #333; background: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2VlZWVlZSIvPjxzdG9wIG9mZnNldD0iNTAlIiBzdG9wLWNvbG9yPSIjZjRmNGY0Ii8+PHN0b3Agb2Zmc2V0PSI1MSUiIHN0b3AtY29sb3I9IiNlMWUxZTEiLz48c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNlNmU2ZTYiLz48L2xpbmVhckdyYWRpZW50PjwvZGVmcz48cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSJ1cmwoI2dyYWQpIiAvPjwvc3ZnPiA='); background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #eeeeee), color-stop(50%, #f4f4f4), color-stop(51%, #e1e1e1), color-stop(100%, #e6e6e6)); background: -moz-linear-gradient(top, #eeeeee, #f4f4f4 50%, #e1e1e1 51%, #e6e6e6); background: -webkit-linear-gradient(top, #eeeeee, #f4f4f4 50%, #e1e1e1 51%, #e6e6e6); background: linear-gradient(to bottom, #eeeeee, #f4f4f4 50%, #e1e1e1 51%, #e6e6e6); }
.btn-wrap .reset:before { background: url("../images/icon-clear.svg") center center no-repeat; }
.btn-wrap .reset:hover { color: #000; 
     background: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2VlZWVlZSIvPjxzdG9wIG9mZnNldD0iNTAlIiBzdG9wLWNvbG9yPSIjZDdkN2Q3Ii8+PHN0b3Agb2Zmc2V0PSI1MSUiIHN0b3AtY29sb3I9IiNjMGMwYzAiLz48c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNlNmU2ZTYiLz48L2xpbmVhckdyYWRpZW50PjwvZGVmcz48cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSJ1cmwoI2dyYWQpIiAvPjwvc3ZnPiA=');
 background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #eeeeee), color-stop(50%, #d7d7d7), color-stop(51%, #c0c0c0), color-stop(100%, #e6e6e6)); 
	 background: -moz-linear-gradient(top, #eeeeee, #d7d7d7 50%, #c0c0c0 51%, #e6e6e6); 
	 background: -webkit-linear-gradient(top, #eeeeee, #d7d7d7 50%, #c0c0c0 51%, #e6e6e6); 
	 background: linear-gradient(to bottom, #eeeeee, #d7d7d7 50%, #c0c0c0 51%, #e6e6e6); }
.btn-wrap .submit { margin-left: 10px; color: #fff;
     background: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzFhMWExYSIvPjxzdG9wIG9mZnNldD0iNTAlIiBzdG9wLWNvbG9yPSIjM2MzYzNjIi8+PHN0b3Agb2Zmc2V0PSI1MSUiIHN0b3AtY29sb3I9IiMwMDAwMDAiLz48c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMxYTFhMWEiLz48L2xpbmVhckdyYWRpZW50PjwvZGVmcz48cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSJ1cmwoI2dyYWQpIiAvPjwvc3ZnPiA=');
	 background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #88000), color-stop(50%, #b01f23), color-stop(51%, #000000), color-stop(100%, #1a1a1a)); 
	 background: -moz-linear-gradient(top, #b01f23, #88000 50%, #880000 51%, #b01f23);
	 background: -webkit-linear-gradient(top, #b01f23, #88000 50%, #880000 51%, #b01f23); 
	 background: linear-gradient(to bottom, #b01f23, #880000 50%, #880000 51%, #b01f23); }
.btn-wrap .submit:before { background: url("../images/icon-mailto.svg") center center no-repeat; }
.btn-wrap .submit:hover { color: #fff; background: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzYyNjI2MiIvPjxzdG9wIG9mZnNldD0iMzAlIiBzdG9wLWNvbG9yPSIjM2MzYzNjIi8+PHN0b3Agb2Zmc2V0PSI1MSUiIHN0b3AtY29sb3I9IiMzMjMyMzIiLz48c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMzYzNjM2MiLz48L2xpbmVhckdyYWRpZW50PjwvZGVmcz48cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSJ1cmwoI2dyYWQpIiAvPjwvc3ZnPiA='); background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #626262), color-stop(30%, #3c3c3c), color-stop(51%, #323232), color-stop(100%, #3c3c3c)); background: -moz-linear-gradient(top, #626262, #3c3c3c 30%, #323232 51%, #3c3c3c); background: -webkit-linear-gradient(top, #626262, #3c3c3c 30%, #323232 51%, #3c3c3c); background: linear-gradient(to bottom, #626262, #3c3c3c 30%, #323232 51%, #3c3c3c); }

/* media */
@media (max-width: 768px) { .products-search .search-box .search-form { width: 100%; }
  .products-search .search-box .search-btn { width: calc(100% - 15px); height: 40px; padding-top: 0; margin-bottom: 15px; }
  .products-search .search-box .search-btn:before { top: 10px; left: 50%; width: 20px; height: 20px; margin-left: -60px; margin-top: 0px; color: #fff; }
  .products-search .search-box .form-field { width: calc(100% - 15px); }
  .products-category .item { width: calc(100% / 2 - 20px); margin-right: 25px; }
  .products-category .item:nth-child(3n) { margin-right: 20px; }
  .products-category .item:nth-child(2n) { margin-right: 0; }
  .products-set li { width: calc(100% / 4 - 15px); margin-right: 15px; }
  .products-set li:nth-child(5n) { margin-right: 15px; }
  .products-set li:nth-child(4n) { margin-right: 0; }
  .products-info .info-list { display: block; width: 100%; margin-left: 0; margin-top: 20px; }
  .products-info .gallery .image-preview { position: relative; display: -webkit-flex; display: -moz-flex; display: -webkit-flex; display: flex; -webkit-justify-content: center; -moz-justify-content: center; -ms-justify-content: center; -ms-flex-pack: center; justify-content: center; width: calc(100% - 120px); }
  .products-info .gallery .image-preview img { width: auto; height: 400px; }
  .products-info .gallery .elastislide-wrapper { height: 420px !important; }
  .products-info .gallery .elastislide-list { height: 340px !important; }
  .products-info .gallery .elastislide-vertical { position: absolute; top: 0; right: 10px; }
  .inquiry-wrap { width: 100%; padding: 0 20px; box-sizing: border-box; }
  .news-gallery { width: 250px; }
  .news-content { width: calc(100% - 270px); }
  .contact-wrap .company-info h2 span.ch { letter-spacing: 0; }
  .contact-wrap .company-info .info { margin-top: -35px; padding: 20px; padding-top: 50px; }
  .contact-wrap .company-info .info li { padding-left: 30px; font-size: 16px; }
  .contact-wrap .company-info .info li:before { top: 6px; width: 22px; height: 22px; }
  .service-wrap { width: 100%; }
  .service-wrap .item .photo { width: 250px; border: 6px solid #F0F0E9; }
  .service-wrap .item .info { width: calc(100% - 290px); margin-left: 40px; } }
@media (max-width: 640px) { .navbar { display: block; width: 100%; margin-bottom: 20px; padding: 0 20px; box-sizing: border-box; }
  .navbar .productsMenu { height: 0; overflow: hidden; }
  .navbar .open-navbar { display: inline-block; }
  .navbar .menu-opened { height: auto; }
  .products-container { display: block; width: 100%; padding: 0 20px; }
  .products-set li { width: calc(100% / 3 - 15px); margin-right: 15px; }
  .products-set li:nth-child(4n) { margin-right: 15px; }
  .products-set li:nth-child(3n) { margin-right: 0; }
  .products-content .products-header { padding: 12px 10px; font-size: 22px; line-height: 1.5; }
  .products-content .products-header .inquiry-btn { right: 12px; top: 10px; width: 140px; }
  .products-info .gallery .image-preview { width: calc(100% - 100px); }
  .products-info .gallery .image-preview img { width: auto; height: 330px; }
  .products-info .gallery .elastislide-wrapper { height: 350px !important; }
  .products-info .gallery .elastislide-list { height: 270px !important; }
  .cases-list .item { width: 100%; margin-right: 0; }
  .cases-list .item .casesImg { height: auto; }
  .page-container .navMenu .item a:link, .page-container .navMenu .item a:visited { padding: 5px 10px; font-size: 18px; line-height: 1.5; letter-spacing: 0; }
  .page-container .news-list li a:link, .page-container .news-list li a:visited { padding: 5px 10px; font-size: 16px; line-height: 1.5; letter-spacing: 0; }
  .leftBox { width: 100%; }
  .rightBox { width: 100%; margin-left: 0; margin-top: 30px; }
  .news-gallery { display: block; width: 250px; }
  .news-content { width: 100%; margin-left: 0; margin-top: 20px; }
  .news-content .btn-back.right { text-align: center; }
  .contact-wrap .company-info { width: 100%; }
  .contact-wrap .contact-form { width: 100%; margin-left: 0; }
  .service-wrap { max-width: 400px; padding: 0; }
  .service-wrap .item { display: block !important; padding: 0 !important; }
  .service-wrap .item .photo { margin-bottom: 20px; }
  .service-wrap .item .info { display: block; width: 100%; margin-left: 0; text-align: center; }
  .service-wrap .item .info .text { letter-spacing: 0; }
  .service-wrap .item .info.small { width: auto; }
  .top-menu { padding: 0 20px; box-sizing: border-box; }
  .process-wrap { width: 100%; } }
@media (max-width: 480px) { .products-category .item { width: 100%; margin-right: 0 !important; }
  .products-category .item .box-list { position: relative; opacity: 1 !important; bottom: 0; background: #000; }
  .products-category .item .box-list li { padding: 6px 0; font-size: 16px; line-height: 1.2; letter-spacing: 1.5px; }
  .products-set li { width: calc(100% / 2 - 15px); margin-right: 15px; }
  .products-set li:nth-child(3n) { margin-right: 15px; }
  .products-set li:nth-child(2n) { margin-right: 0; }
  .products-info .gallery .image-preview img { width: auto; height: 260px; }
  .products-info .gallery .elastislide-wrapper { height: 280px !important; }
  .products-info .gallery .elastislide-list { height: 200px !important; }
  .products-info .gallery .elastislide-vertical { padding: 30px 6px; margin-left: 5px; }
  /* pager */
  .pagination ul li:first-child, .pagination ul li:last-child { display: none; }
  .inquiry-wrap .form-container .form-field { width: 100%; margin: 0; margin-bottom: 10px; }
  .inquiry-wrap .form-container .field-desc { width: 100%; }
  .inquiry-wrap .form-container .field-desc.ucode { margin-bottom: 5px; }
  .cases-gallery { width: 100%; }
  .unit-list { width: 95%; }
  .contact-wrap { padding: 20px; }
  .contact-wrap .company-info h2 span.ch { font-size: 22px; }
  .contact-wrap .company-info h2 span.en { display: none; }
  .contact-wrap .company-info .info { margin-top: -15px; padding-top: 30px; }
  .top-menu { padding: 0 20px; box-sizing: border-box; } }

.fontw{font-size:16px; color:#006699;padding-bottom:6px;}
/*# sourceMappingURL=style.css.map */


.fontw{font-size:16px; color:#006699;padding-bottom:6px;}

.btncase {position: relative;
    padding: 5px 8px;
    margin: 20px 2px 2px 10px;
    border: 1px solid #c8a062;
	border-radius:2px;
    outline: none;
    background: #c8a062;
    font-family: "微軟正黑體", sans-serif;
    font-size: 16px;
    font-weight: bold;
	}
	
.btncase a{color:#fff !important;}	
.btncase a:hover{background-color:#ccc !important;}	
.btncase a:focus,a:active{background-color:#666 !important;}	

.mySlides {display:none}
.w3-left, .w3-right, .w3-badge {cursor:pointer}
.w3-badge {height:13px;width:13px;padding:0}