@import url(https://fonts.googleapis.com/css?family=Oswald);
@import url(https://fonts.googleapis.com/css?family=Raleway:200,300,400);
@import "bootstrap/bootstrap.css";
@import "default.css";
@import "animate.css";
@import "magic.min.css";
@import "animation.css";
@import "fonts/style.css";
@import "fonts/fontello/css/iconm.css";
@import "plugins.css";
@import "component.css";
@import "fancybox/jquery.fancybox.css";
@import "tooltip-classic.css";
@import "jquery.mCustomScrollbar.css";
@import "dropkick.css";
/*@import "jqzoom.css";*/
/* CSS Document */
/* ==========================================================================
    set
 ========================================================================== */
 
 
.mc {
  color: #2db587;
}

.wp {
  overflow: hidden;
  background-color:#FFF;
  margin-bottom:-25px;
}

/*.max-md-size .wp {
  visibility: hidden;
}*/

/*.container {
  max-width: 1175px;
}*/

a[href] {
  outline: 0;
  text-decoration: none;
}

.text-hide {
  margin: 0;
  padding: 0;
  /*position:relative;
  position:absolute;*/
}

.main {
  padding: 62px 0 0 0;
}

.max-md-size .main {
  padding: 62px 0 0 0;
}

.home .main {
  padding: 0;
}


/**/
.w94 {
  width:94%;
  margin:0 auto;
}

.w84 {
  width:84%;
  margin:0 auto;
}

.w80 {
  width:80%;
  margin:0 auto;
}

.w70 {
  width:70%;
  margin:0 auto;
}

.w60 {
  width:60%;
  margin:0 auto;
}

.max-lg-size .w94,
.max-lg-size .w84,
.max-lg-size .w80,
.max-lg-size .w70,
.max-lg-size .w60 {
  width:96%;
}

.max-sm-size .w94,
.max-sm-size .w84,
.max-sm-size .w80,
.max-sm-size .w70,
.max-sm-size .w60 {
  width: 92%;
  padding-left:3%;
  padding-right:3%;
}


.mainBtn {
  background-color: #ff0000;
  color: #fff;
  font-size:15px;
  display: block;
  padding: .5em;
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}

.green .mainBtn {
  background-color: #01903d;
}

.mainBtn2 {
  color: #fff;
  font-size: 15px;
  display: inline-block;
  padding: .8em 2em;
  border-radius: 0;
  text-align: center;
  margin: 40px auto 0 auto;
  border: 1px solid #FFF;
}

.mainBtn2:hover {
  color: #fff;
  background-color: #c80f0f;
}

.green .mainBtn2:hover {
  background-color: #028137;
}

.mainBtn:hover {
  color: #fff;
  background-color: #c80f0f;
}

.green .mainBtn:hover {
  background-color: #028137;
}

.clearfix:before {
  display: table;
  content: " ";
}

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

/*.loadIn {
  visibility: hidden;
}*/

.loadIn-md {
  opacity:0;
  background-color: transparent;
  -webkit-animation-delay:.001s;
     -moz-animation-delay:.001s;
       -o-animation-delay:.001s;
      -ms-animation-delay:.001s;
          animation-delay:.001s;
}

/* ==========================================================================
    header
 ========================================================================== */
#header {
    height: 62px;
    width: 100%;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 200;
    background-color: #fff;
    animation-delay: 0.3s;
    /*transition: all 0.5s;*/
    box-shadow: 1px 1px 8px 1px rgba(0,0,0,0.3);
    /*-webkit-animation: fadeIn 1s both ease-in-out;
          animation: fadeIn 1s both ease-in-out;*/
}

.min-md-size #header {
   transition: all 0.5s;
}

.home #header {
	height: 120px;
  width: 100%;
  background-color: transparent;
  box-shadow: 1px 1px 8px 1px rgba(0,0,0,0);
}

.home #header.actived,
.max-md-size #header {
  height: 62px !important;
  background-color: #fff;
  box-shadow: 1px 1px 8px 1px rgba(0,0,0,0.3);
}

.max-md-size #header {
  height: 62px !important;
  background-color: #fff;
  box-shadow: 1px 1px 8px 1px rgba(0,0,0,0.3);
}

#logo {
  float: left;
  margin: 0;
  margin-left: 2.1%;
  margin-right: 1%;
  height: 52px;
  line-height: 52px;
  width: 15%;
  max-width: 110px;
  min-width: 40px;
  position: relative;
  top:0;
  z-index: 200;
  
  animation-delay: 0.3s;
  transition: max-width 0.5s;
}

#logo a {
  display: block;
  width: 100%;
  height: 100%;
}

#logo img {
  max-width: 100%;
}

.home #logo {
  max-width: 220px;
  min-width: 80px;
  top:16px;
}

.green.home #logo {
  max-width: 300px;
  min-width: 70px;
}

#header.actived #logo{
  top:3px;
  max-width: 110px !important;
  min-width: 40px !important;
}

/*size*/
.max-md-size #logo {
  top: 3px;
  max-width: 135px !important;
  min-width: 32px !important;
}
.max-md-size #header.actived #logo{
  max-width: 110px !important;
  min-width: 40px !important;
}
.max-md-size .green #logo {
  top:3px;
  max-width: 140px !important;
  min-width: 33px !important;
}
.max-md-size .green #header.actived #logo{
  max-width: 110px !important;
  min-width: 40px !important;
}

.max-sm-size #logo,
.max-sm-size #header.actived #logo {
  left:7px;
  max-width: inherit !important;
  width: 135px;
  height:32px;
}

/* ==========================================================================
    header [top-link]
 ========================================================================== */
.min-md-size .top-link {
  position: absolute;
  top:18px;
  right:1.5%;
}

.home .top-link {
  top:18px;
}

.min-md-size .home .top-link {
  top:30px;
}

#header.actived .top-link {
  top:18px;
  animation-delay: 0.3s;
  transition: top 0.5s;
}

.top-link {
  position: absolute;
  top:18px;
  /*top:-18px;*/
  right:1.5%;
}

.top-link ul {
  display: block;
}

.top-link li {
  position: relative;
  font-family: Arial, serif, "微軟正黑體", "思源黑體 TWHK Normal", "蘭亭黑-繁", "黑體-繁", "新細明體-ExtB";
}

.top-link li a.icon {
  height: 32px;
  line-height: 32px;
  text-align: center;
  padding: 0px 7px;
  display: block;
  position: relative;
  z-index: 200;
}

.top-link .icon-search2 {
  font-weight: normal;
  font-size: 20px;
  color: #b7b7b7;
}

.top-link .icon-search2:hover {
  color: #df201d;
}

.green .top-link .icon-search2:hover {
  color: #007400;
}

/* ==========================================================================
    header [searchBox]
 ========================================================================== */
.searchBox {
  position: relative;
  z-index:9999999;
  padding: 0;
  display: none;
}

.searchBox > .searchA {
  position: absolute;
  top: 4px;
	right: 5px;
}

.searchBox input {
  color:#999 !important;
  line-height: 1.2em;
  width: 175px;
  margin-top: -2px;
  padding: 7px 10px 7px 10px;
  border: 1px solid #ccc;
  -webkit-border-radius: 3px;
     -moz-border-radius: 3px;
          border-radius: 3px; 
}

.searchBoxS {
  display: none;
}

/*size*/
.max-lg-size .searchBoxS {
  display: block;
}

.max-md-size .searchBoxS {
  display: none;
}

.min-lg-size .searchBox {
  display: block;
}

/* ==========================================================================
    header [languageBox]
 ========================================================================== */
.languageBox {
  width:105px;
  position: relative;
  top:-2px;
  background-color:#df201d;
  margin:0 10px !important;
  border-radius: 5px;
}

.green .languageBox {
  background-color: #00933F;
}

.languageBox a {
  color:#FFF;
  text-decoration:none;
}

.languageBox:hover {
  background-color: rgba(170, 25, 20, 1);
}

.green .languageBox:hover {
  background-color: rgba(5, 100, 40, 1);
}

.languageBox .icon-earth {
  font-size:17px;
  position:relative;
  top:2px;
  margin: 0 5px;
}
/*size*/
.max-md-size .languageBox {
  display:none;
}


/* ==========================================================================
    header [languageBox-list]
 ========================================================================== */
.languageBox-list {
  width:100%;
  position:absolute;
  z-index:201;
  background-color: rgba(223, 32, 30, .85);
  border-radius: 0 0 5px 5px;
  overflow:hidden;
  display:none;
}

.green .languageBox-list {
  background-color: rgba(20, 135, 70, .85);
}

.languageBox-list > li {
  text-align:center;
}

.languageBox-list > li:hover > a {
  background-color: rgba(170, 25, 20, 1);
}

.green .languageBox-list > li:hover > a {
  background-color: rgba(5, 100, 40, 1);
}

.languageBox-list > li > a {
  color: #FFF;
  font-size: 16px;
  padding: 10px 0;
  display: block;
  border-top: 1px solid #F15C5C;
}

.green .languageBox-list > li > a {
  border-top: 1px solid #66b880;
}

.languageBox-list a {
  text-decoration: none !important;
}


/* ==========================================================================
    header [shareBox]
 ========================================================================== */
.shareBox {
  position: relative;
  top:-2px;
  -webkit-border-radius: 3px;
     -moz-border-radius: 3px;
          border-radius: 3px;
  border: 1px solid #df201d;
}

.green .shareBox {
  border: 1px solid #009d42;
}

.shareBox:hover {
  background-color: #F4B7B5;
}

.green .shareBox:hover {
  background-color: #9fddb9;
}

.shareBox a.icon {
  height: 30px !important;
  line-height: 30px !important;
  padding: 0px 4px !important;
}

.shareBox a.icon img{
  max-width:80%;
}

/*size*/
.max-md-size .shareBox {
  top:-10px;
  right:5px;
  /*top:-12px;*/
}

.max-md-size .shareBox a.icon {
  width:47px;
  height: 45px!important;
  line-height: 45px!important;
  /*width:47px;
  height: 47px!important;
  line-height: 47px!important;*/
}

.max-md-size .shareBox a.icon img{
  max-width:100%;
}

/* ==========================================================================
    header [選單]
 ========================================================================== */
.cbp-hsmenu > li > a {
  color: #000;
  animation-delay: 0.3s;
  transition: all 0.5s;
}

.max-md-size .cbp-hsmenu > li > a {
  height:62px;
  line-height:62px;
}

.home .cbp-hsmenu > li > a {
  color: #FFF;
}

#header.actived .cbp-hsmenu > li > a,
.max-md-size .cbp-hsmenu > li > a {
  color: #000;
  
}

/*.max-md-size .no-touch .cbp-hsmenu > li > a:hover,
.max-md-size .no-touch .cbp-hsmenu > li > a:focus,
.max-md-size .cbp-hsmenu > li.cbp-hsitem-open > a{
  color: #FFF;
  text-shadow: 1px 1px 10px rgba(0,0,0,0.8);
  margin: -2px 0 2px 0;
  animation-delay: 0.3s;
  transition: all 0.5s;
}*/

#cbp-hsmenu-wrapper {
  width: 100%;
}

#cbp-hsmenu-wrapper .mobileMenu {
  visibility: hidden;
  pointer-events: none;
  z-index: -1;
  position: absolute;
}

#cbp-hsmenu-wrapper .nav-header {
  width: 100%;
}

#cbp-hsmenu-wrapper .cbp-hsinner {
  display: block;
}

.max-md-size#cbp-hsmenu-wrapper .cbp-hsinner {
  overflow-x: hidden;
}

#cbp-hsmenu-wrapper .cbp-hsinner .cbp-hsmenu > li {
  text-align:center;
}

#cbp-hsmenu-wrapper .cbp-hsinner .cbp-hsmenu > li > a {
  position: relative;
}

#cbp-hsmenu-wrapper .cbp-hsinner .cbp-hsmenu > li > a:after {
  content: '';
  position: absolute;
  left:0;
  right:0;
  margin:0 auto;
  display: block;
  width: 0%;
  height: 3px;
  background-color: #df201d;
  bottom: 0;
  left: 0;
  -webkit-transition: 0.5s ease-in-out;
          transition: 0.5s ease-in-out;
}

.green #cbp-hsmenu-wrapper .cbp-hsinner .cbp-hsmenu > li > a:after {
  background-color: #009d42;
}

#cbp-hsmenu-wrapper .cbp-hsinner .cbp-hsmenu > li#about-subBox {
  position: relative;
}

#cbp-hsmenu-wrapper .cbp-hsinner .cbp-hsmenu > li.invisible-md {
  display: none;
}

#cbp-hsmenu-wrapper .cbp-hsinner .cbp-hsmenu > li .search {
  padding: 15px 0;
  width: 100%;
  border-bottom: 1px solid #df201d;
}

.green #cbp-hsmenu-wrapper .cbp-hsinner .cbp-hsmenu > li .search {
  border-bottom: 1px solid #009d42;
}

#cbp-hsmenu-wrapper .cbp-hsinner .cbp-hsmenu > li .search input {
  height: 35px;
  padding: 10px;
}

#cbp-hsmenu-wrapper .cbp-hsinner .cbp-hsmenu > li .language {
  padding: 15px 0;
}

#cbp-hsmenu-wrapper .cbp-hsinner .cbp-hsmenu > li .language img {
  margin-right: 10px;
}

#cbp-hsmenu-wrapper .cbp-hsinner .cbp-hsmenu > li .language a {
	font-size:15px;
  display: inline-block;
  margin-right: 10px;
}

#cbp-hsmenu-wrapper .cbp-hsinner .cbp-hsmenu > li:hover a:after,
#cbp-hsmenu-wrapper .cbp-hsinner .cbp-hsmenu > li.cbp-hsitem-open a:after,
#cbp-hsmenu-wrapper .cbp-hsinner .cbp-hsmenu > li.actived > a:after {
  width: 98%;
  -webkit-transition: 0.5s ease-in-out;
          transition: 0.5s ease-in-out;
}

.max-md-size #cbp-hsmenu-wrapper .cbp-hsinner .cbp-hsmenu > li:hover a:after,
.max-md-size #cbp-hsmenu-wrapper .cbp-hsinner .cbp-hsmenu > li.cbp-hsitem-open a:after,
.max-md-size #cbp-hsmenu-wrapper .cbp-hsinner .cbp-hsmenu > li.actived > a:after {
  width: 100%;
}
/*.max-md-size #cbp-hsmenu-wrapper .cbp-hsinner .cbp-hsmenu > li:hover a:after {
  display:none;
}*/

#cbp-hsmenu-wrapper .cbp-hsinner .subBoxList > li {
  /*border-bottom: 1px solid #898989;*/
  border-bottom: 1px solid #df9f9e;
}

.green #cbp-hsmenu-wrapper .cbp-hsinner .subBoxList > li {
  border-bottom: 1px solid #66b880;
}

.max-md-size #cbp-hsmenu-wrapper .cbp-hsinner .subBoxList > li {
  border-bottom: 1px solid #df9f9e;
}

.max-md-size .green #cbp-hsmenu-wrapper .cbp-hsinner .subBoxList > li {
  border-bottom: 1px solid #66b880;
}

#cbp-hsmenu-wrapper .cbp-hsinner .subBoxList > li a {
  color: #fff;
  font-size:16px;
  padding: 10px;
  letter-spacing:.5px;
  display: block;
  width: 100%;
  height: 100%;
  min-width:120px;
  /*background-color: #4F4F4F;*/
  background-color: rgba(215, 12, 25, .9);
}

.green #cbp-hsmenu-wrapper .cbp-hsinner .subBoxList > li a {
  background-color: rgba(8, 150, 65, .9);
}

.max-md-size #cbp-hsmenu-wrapper .cbp-hsinner .subBoxList > li a {
  font-size:17px;
  padding: 1.1em 1em;
  
  -webkit-transition: .5s;
          transition: .5s;
}

#cbp-hsmenu-wrapper .cbp-hsinner .subBoxList > li a:hover {
  /*background-color: #696969;*/
   background-color: rgba(223, 32, 29, .9);
  -webkit-transition: .5s;
          transition: .5s;
}

.green #cbp-hsmenu-wrapper .cbp-hsinner .subBoxList > li a:hover {
   background-color: rgba(5, 170, 75, .9);
}

/*size*/
.min-md-size #cbp-hsmenu-wrapper .cbp-hsinner {
  display: block!important;
}

.max-lg-size .cbp-hsmenu > li > a {
  padding: 0px .5em;
  margin:0;
  /*font-size: 13px;*/
}

.max-bgs-size .cbp-hsmenu > li > a {
  padding: 0px .3em;
}

.max-md-size #cbp-hsmenu-wrapper .mobileMenu {
  color: #df201d;
  font-size: 40px;
  /*font-size: 27px;*/
  text-align: center;
  width: 60px;
  height: 60px;
  line-height: 60px;
  position: relative;
  top:-16px;
  right: 10px;
  /*top:-18px;
  right: 8px;*/
  visibility: visible;
  pointer-events: all;
  z-index: 200;
  cursor: pointer;
}

.max-md-size .green #cbp-hsmenu-wrapper .mobileMenu {
  color: #009d42;
}

.max-md-size #cbp-hsmenu-wrapper .mobileMenu .tooltip-content {
  bottom: auto;
  top: 100%;
  font-size: 15px;
  color: #333;
}

.max-md-size #cbp-hsmenu-wrapper .mobileMenu .tooltip-content:after {
  top: auto;
  bottom: 100%;
  border-bottom-color: #BEBEBE;
  border-top-color: transparent;
}

.max-md-size #cbp-hsmenu-wrapper .cbp-hsinner {
  display: none;
  position: absolute;
  top: 60px;
  background-color: #fff;
  /*background-color: rgba(215, 12, 25, .85);*/
  overflow-y: auto;
  /*max-height: 100%;*/
  height:590px;/*HTC使用*/
  height: 88vh;
  /*max-height: 88vh;*/
  width: 100%;
  -webkit-overflow-scrolling: touch;
}

.max-md-size #cbp-hsmenu-wrapper .cbp-hsinner:before {
  content: '';
  background: url(images/common/shadow.png) left bottom repeat-x;
  display: block;
  height: 12px;
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
}

.max-md-size #cbp-hsmenu-wrapper .cbp-hsinner .subBoxList > li {
  text-align: center;
}

.max-md-size .cbp-hsmenu > li {
  border-bottom: 1px solid #df201d;
}

.max-md-size .green .cbp-hsmenu > li {
  border-bottom: 1px solid #009d42;
}

.max-md-size .invisible-md {
  display: block!important;
}

.min-md-size .cbp-hsinner {
  position: relative;
}

.min-md-size .cbp-hsinner .cbp-hsmenu {
  width:100%;
  position:absolute;
  top:0;
  left:170px;
  transition: all 0.4s;
}

.min-md-size .home .cbp-hsinner .cbp-hsmenu {
  width: auto;
  display:block;
  position:absolute;
  top:65px;
  right: 13px;
  left: inherit;
}
.min-md-size #header.actived .cbp-hsinner .cbp-hsmenu{
  width:100%;
  top:0;
  left:170px;
}

.min-md-size .home .cbp-hsmenu > li > a:hover,
.min-md-size .home .cbp-hsmenu > li > a:focus{
  color: #FFF;
  text-shadow: 1px 1px 10px rgba(0,0,0,0.8);
  margin:10px 0 0 0;
  /*margin: -2px 0 2px 0;*/
  animation-delay: 0.3s;
  transition: all 0.5s;
}

.min-md-size .home #header.actived .cbp-hsmenu > li > a:hover,
.min-md-size .home #header.actived .cbp-hsmenu > li > a:focus{
  text-shadow: 1px 1px 10px rgba(0,0,0,0);
  /*margin:10px 0 0 0;*/
}

/* ==========================================================================
    fancybox [language]
 ========================================================================== */
.bg-fancybox .fancybox-wrap {
  width: 100%!important;
  height: 100%!important;
  top: 0!important;
  left: 0!important;
  right: 0;
  bottom: 0;
  margin: auto;
  overflow-y: scroll;
}

.bg-fancybox .fancybox-skin,
.bg-fancybox .fancybox-outer,
.bg-fancybox .fancybox-inner {
  width: 100%!important;
  height: 100%!important;
}

.bg-fancybox .fancybox-skin {
  background-color: transparent;
}

.bg-fancybox.fancybox-overlay {
  overflow-y:hidden!important;
}
.fancybox-margin {
    margin-right: 0px!important;
}
.hideLine {
  overflow-y:scroll!important;
}

/* ==========================================================================
    fancybox [share]
 ========================================================================== */
 
.fancyBox.share {
  padding: 0;
}

.fancyBox.share .heading {
  height:75px;
  background-color:#ef4442;
}

.green .fancyBox.share .heading {
  background-color: #40ac63;
}

.fancyBox.share .heading h3 {
  color: #fefefe;
  font-weight: normal !important;
  text-transform: uppercase;
  letter-spacing:1px;
  line-height: 75px;
  margin: 0;
}

.fancyBox.share .inner {
  padding:35px 0;
  background-color:#df201d;
  border-top: 1px solid #fbd0d0;
  -webkit-filter: drop-shadow(5px 5px 3px rgba(0, 0, 0, 0.7));
          filter: drop-shadow(5px 5px 3px rgba(0, 0, 0, 0.7));
}

.green .fancyBox.share .inner {
  background-color:#009d42;
  border-top: 1px solid #a9ddbf;
}

/* ==========================================================================
    share [shareList]
 ========================================================================== */
.shareList {
}

.shareList > a {
  color: rgba(255, 255, 255, 1);
  font-size: 18px;
  display: inline-block;
  margin: 3% 4%;
  text-decoration: none;
}

.shareList > a:hover {
  color: rgba(255, 255, 255, .5);
}

.shareList > a span {
  display:block;
}

.shareList > a .inco img{
  max-width:83%;
}

.shareList > a:hover .inco img{
  opacity:.5;
}

.shareList > a .name {
  margin-top:10px;
}

/* ==========================================================================
    footer
 ========================================================================== */
#footer {
  color: #fff;
  text-align:center;
  width: 100%;
  padding: 40px 0 18px 0;
  display: block;
  background-color:#df201d;
}

.green #footer {
  background-color:#009d42;
}

#footer .share {
  margin-bottom:25px;
}

#footer .share a {
  text-align:center;
  line-height:28px;
  width:36px;
  height:36px;
  padding:4px;
  margin: 0 2px;
  display:inline-block;
  background-color: rgba(255, 255, 255, 0);
  border-radius:100%;
  vertical-align: middle;
  position: relative;
  text-decoration: none;
  -webkit-transition: All 0.4s ease-in-out;
     -moz-transition: All 0.4s ease-in-out;
       -o-transition: All 0.4s ease-in-out;
      -ms-transition: All 0.4s ease-in-out;
          transition: All 0.4s ease-in-out;
}

#footer .share a img{
  height:100%;
}

#footer .share a:hover {
  background-color: rgba(255, 255, 255, .25);
  -webkit-transform:rotate(360deg);
     -moz-transform:rotate(360deg);
       -o-transform:rotate(360deg);
      -ms-transform:rotate(360deg); 
          transform:rotate(360deg);
}

#footer .logo img {
  width:76px;
}

#footer .logo span {
  font-size:18px;
  letter-spacing:.4px;
  display:block;
  margin-top:6px;
}

#footer address {
  padding:8px 0;
}

#footer address span {
  color: rgba(255, 255, 255, .65);
  font-size:14px;
  letter-spacing:.4px;
  display:block;
  padding:1.5px 0;
}

#footer .copyright {
  font-size:13px;
  letter-spacing:.4px;
  margin-top: 12px;
}

#footer .copyright span {
  color: rgba(255, 255, 255, .65);
  margin: 0 .8em;
}

#footer .copyright a {
  color: rgba(255, 255, 255, .65);
  transition:all .3s ease-in;
}

#footer .copyright a:hover {
  color: rgba(255, 255, 255, 1);
  text-decoration: underline;
}

#footer .top {
	width:70px;
	height:70px;
	border-radius:50%;
	box-shadow:2px 1px 10px rgba(0,0,0,0.3);
	background-color:rgba(255,255,255,0.8);
	display:none;
	
	position: fixed;
	bottom:75px;
	right:50px;
	
	color:#df201d;
	font-size:15px;
  font-family: Arial, Helvetica, sans-serif;
	text-align:center;
  text-decoration:none;
	line-height:70px;
	
	transition:all 0.5s;
	z-index:9999999999999999999 !important;
}

.green #footer .top {
  color:#009d42;
}

#footer .top:hover {
	background-color:rgba(255,255,255,1);
}

.max-md-size #footer {
  padding: 35px 0 18px 0;
}

.max-md-size #footer .share {
    margin-bottom: 15px;
}

.max-md-size #footer .copyright span {
  display:block;
}

.max-sm-size #footer .top {
	width:60px;
	height:60px;
	line-height:60px;
	bottom: 20px;
    right: 20px;
}

.max-sm-size #footer .termsFot {
  display:block;
}

/* ==========================================================================
    page
 ========================================================================== */
 
/*== 內頁banner  =========================== */
.pageBanner {
  position: relative;
  width: 100%;
  height: 40vh;
  max-height: 400px;
  margin-bottom: -7px;
  opacity: 0;
  -webkit-animation: fadeIn 1s both ease-in-out;
          animation: fadeIn 1s both ease-in-out;
}

.pageBanner .text {
  position: absolute;
  text-align: center;
  width: 60%;
  color: #fff;
  top: 50%;
  left: 0;
  right: 0;
  margin: auto;
  -webkit-transform: translateY(-50%);
      -ms-transform: translateY(-50%);
          transform: translateY(-50%);
  z-index: 5;
  padding: 0 15px;
}

.pageBanner .text h2 {
  font-size: 45px;
  font-style: italic;

  margin-bottom: 15px;
}

/*size*/
.max-xs-size .pageBanner .text {
  width: 100%;
}

.max-xs-size .pageBanner .text h2 {
  font-size: 30px;
}

.max-xs-size .pageBanner .text br {
  display: none;
}

.pageHeader {
  text-align: center;
  width: 100%;
  padding: 3% 0;
}

.pageHeader h2 {
  font-size: 45px;
  font-style: italic;
  color: #565656;
  margin-bottom: .5em;
}

/*== 內頁 pageBox  =========================== */
.pageBox {
  position:relative;
  background-color:#FFF;
}

/*== 內頁 hdMid  =========================== */
.hdMid {
  text-align:center;
  padding:25px 0 ;
  box-sizing: border-box;
  position:relative;
}

.hdMid:before {
  content: '';
  /*height: 100%;*/
  display: inline-block;
  vertical-align: middle;
}

.hdMid > .inner {
  display: inline-block;
  vertical-align: middle;
  text-align: center;
}

.hdMid > .inner > .heading {
  margin:0;
}

.hdMid > .inner > .heading span {
  color: #000;
  font-size: 25px;
  font-weight: normal;
  text-transform: uppercase;
  font-family: "微軟正黑體";
  
  position:relative;
  display:inline-block;
}

.hdMid > .inner > .heading span:after {
  content:"";
  width:100%;
  height:1px;
  margin:8px 0 15px 0;
  display:block;
  background-color:#000;
}

.hdMid .pageShare {
  position: absolute;
  top: 25px;
  right: 75px;
  padding: 4px 5px 4px 40px;
  background-image: url(images/product/inco-share.png);
  background-repeat: no-repeat;
  background-position: 5px center;
  border: 1px solid transparent;
  border-radius:5px;
}

.hdMid .pageShare:hover {
  color: #000;
  border: 1px solid #df201d;
  background-color: #F4B7B5;
}

.green .hdMid .pageShare:hover {
  border: 1px solid #007400;
}

.footer .hdMid .pageShare:hover {
  border: 1px solid #009d42;
}

/*size*/
.max-sm-size .hdMid {
  height: auto;
  margin: 10px 0 5px 0;
  /*margin: 10px 0 20px 0;*/
}

.max-sm-size .hdMid .pageShare {
  position: absolute;
  top: 5px;
  right: 5px;
}

/*== 內頁 maplink  =========================== */
.maplink > a {
  color:#000;
  font-size:14px;
}

.maplink > a:hover {
  color: #df201d;
  text-decoration: underline;
}

.green .maplink > a:hover {
  color: #009d42;
}

.maplink > a:before {
  content: '';
  height: 10px;
  width: 10px;
  margin: 0 13px 0 8px;
  display: inline-block;
  background-image: url(images/icon/inoc-maplink.png);
  background-repeat: no-repeat;
}

.maplink > a:first-child:before {
  display:none;
}

.maplink > a:last-child {
  cursor:default;
}

.maplink > a:last-child:hover {
  color: #000;
  text-decoration: none;
}

/* ==========================================================================
    nav 紅頁籤
 ========================================================================== */
#nav {
  line-height:45px;
  text-align:center;
  position:relative;
  background-color:#f6f6f6;
}

#nav ul {
  padding:0;
  margin: 0;
	list-style:none;
}

#nav ul li {
  width:18%;
  display:inline-block;
  margin:0 -2px;
}

#nav ul li:first-of-type {
  width:32%;
  text-align:right;
}

#nav ul li:last-of-type {
  width:32%;
  text-align:left;
}

#nav ul li a {
  color:#9a9a9a;
	font-size:16px;
  font-weight:bold;
	line-height:45px;
	padding:0 20%;
	display:block;
	position:relative;
}

#nav ul li a.actived,
#nav ul li a.actived:hover,
#nav ul li a.active,
#nav ul li a.active:hover {
  color: #FFF;
  font-size: 18px;
  background-color: rgba(225, 35, 35, 1);
  text-decoration: none;
}

.green #nav ul li a.actived,
.green #nav ul li a.actived:hover,
.green #nav ul li a.active,
.green #nav ul li a.active:hover {
  background-color: rgba(0, 157, 66, .9);
}

#nav ul li a:hover {
  color:#FFF;
	background-color: rgba(225, 35, 35, .7);
}

.green #nav ul li a:hover {
	background-color: rgba(0, 157, 66, .7);
}

#nav .toggle {
  color: #fff;
  font-size:18px;
  font-weight:bold;
	line-height:50px;
	padding:5px 0;
	display:block;
	position:relative;
	cursor:pointer;
	display:none;
  background-color: rgba(225, 35, 35, 1);
}

.green #nav .toggle {
  background-color: rgba(0, 157, 66, 1);
}

#nav .toggle .icon {
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 10px 7px 0 7px;
  /*border-width: 8px 5px 0 5px;*/
	border-color: #ffffff transparent transparent transparent;
	position:absolute;
	top: 25px;
  right: 20px;
  /*right: 15px;*/
}

/*3欄*/
#nav.nav33 ul li {
  width:20%;
}

#nav.nav33 ul li:first-of-type,
#nav.nav33 ul li:last-of-type {
  width:40%;
}

/*2欄*/
#nav.nav50 ul li {
  width:50%;
}

#nav.nav50 ul li:first-of-type,
#nav.nav50 ul li:last-of-type {
  width:50%;
}

#nav.nav50 ul li a {
	padding:0 30%;
}

/*均等欄*/
#nav.navSame ul li {
  width:18%;
  display:inline-block;
  margin:0 -2px;
  /*border: solid 1px #FFF;*/
}

#nav.navSame ul li:first-of-type {
  width:18%;
  text-align: center;
}

#nav.navSame ul li:last-of-type {
  width:18%;
  text-align: center;
}


/*.max-md-size #nav {
  line-height:0;
}

.max-md-size #nav ul {
  padding: 0;
  margin:-3px 0 0 0;
  
}

.max-md-size #nav ul li{
	width:100% !important;
  margin:0;
  text-align:center;
}

.max-md-size #nav ul li a {
  font-size:18px;
  font-weight:normal;
  line-height:55px;
  border: none;
  border-bottom: 1px solid #dcdcdc;
  padding:4px 0;
  margin: 0;
}

.max-md-size #nav ul li:first-of-type a {
	border-top:none;
}

.max-md-size #nav ul li a.actived {
	display:none;
}

.max-md-size #nav ul li a:before {
	content:normal;
}

.max-md-size #nav .toggle {
	display:block
}

.max-md-size #nav ul {
	display:none;
}

.max-md-size #nav ul li a.actived {
  color: #9a9a9a;
  background-color: #fff;
  border-color: #dcdcdc;
}*/

@media (max-width: 992px){
  #nav {
    line-height:0;
  }
  
  #nav ul {
    padding: 0;
    margin:0;
    /*margin:-3px 0 0 0;*/
  }
  
  #nav ul li{
    width:100% !important;
    margin:0;
    text-align:center;
  }
  
  #nav ul li a {
    font-size:18px;
    font-weight:normal;
    line-height:55px;
    border: none;
    border-bottom: 1px solid #dcdcdc;
    padding:4px 0;
    margin:0 !important;
  }
  
  #nav ul li:first-of-type a {
    border-top:none;
  }
  
 /*#nav ul li a.actived,
  #nav ul li a.active {
    display:none;
  }*/
  
  #nav ul li a:before {
    content:normal;
  }
  
  #nav .toggle {
    display:block;
  }
  
  #nav ul {
    display: none;
  }
  
  #nav ul li a.actived {
    color: #9a9a9a;
    background-color: #fff;
    border-color: #dcdcdc;
  }
  
  #nav ul li:first-of-type {
    text-align: center;
  }

  #nav ul li:last-of-type {
    text-align: center;
  }
  
  #nav ul li a.actived,
  #nav ul li a.actived:hover,
  #nav ul li a.active,
  #nav ul li a.active:hover {
    color:#FFF;
    background-color: rgba(225, 35, 35, .7);
  }
}

/*== editor 編輯器  =========================== */
.editor {
  color: #6B6B6B;
  font-size: 15px;
  line-height: 1.6;
}

.editor img {
  max-width: 100%;
}

/*== 上下留白  =========================== */
.padding20 {
  padding-top: 2%;
  padding-bottom: 2%;
}

.max-md-size #technical .padding20 {
  padding-top: 20px;
  padding-bottom: 20px;
}

.padding30 {
  padding-top: 3%;
  padding-bottom: 3%;
}

.padding40 {
  padding-top: 4%;
  padding-bottom: 4%;
}

.padding50 {
  padding-top: 5%;
  padding-bottom: 5%;
}

/* ==========================================================================
    warp 卷軸預設樣式
 ========================================================================== */
.warp-scrollbar_x {
  border: 0!important;
  margin-bottom: 30px;
}

.warp-scrollbar_x .mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar,
.warp-scrollbar_x .mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar {
  background-color: #2db587 !important;
}

.warp-scrollbar_x .mCS-rounded-dots.mCSB_scrollTools .mCSB_draggerRail,
.warp-scrollbar_x .mCS-rounded-dots-dark.mCSB_scrollTools .mCSB_draggerRail {
  background-image: url(images/icon/dot.png);
}

/* ==========================================================================
    fancybox 預設樣式
 ========================================================================== */
.fancyBox {
  padding: 15%;
  position: relative;
  text-align: center;
  width: 560px;
  max-width: 100%;
  background-color: #fff;
}

.fancyBox .mainBtn {
  max-width: 160px;
  margin-top: 2em;
}

.fancybox-skin {
  border-radius: 0;
  background-color: #fff;
  padding: 0!important;
}

.fancybox-close {
  background-image: none;
  top: 15px;
  right: 15px;
}

.fancybox-close:before {
  content: "\e117";
  font-family: 'icomoon';
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  color: #E0E0E0;
  font-size: 35px;
}

/* ==========================================================================
    btns-hr 複數按鈕 水平
 ========================================================================== */
.btns-hr {
  text-align: center;
}

.btns-hr .btn {
  display: inline-block;
  vertical-align: middle;
  border-radius: 0;
  width: 160px;
  padding: 1em;
  margin: 1em 10px;
}

.btns-hr .btn:hover,
.btns-hr .btn:focus {
  color: #fff;
}

/* ==========================================================================
    form 表單
 ========================================================================== */
form {
  width: 100%;
}

form .form-group {
  width: 100%;
  margin-bottom: 0;
}

form .form-group:before {
  display: table;
  content: " ";
}

form .form-group:after {
  display: table;
  content: " ";
  clear: both;
}

form .form-group label:not(.form-check-label) {
  text-align: right;
  display: block;
  float: left;
  width: 15%;
  vertical-align: top;
  height: 45px;
  color: #6C6C6C;
  font-weight: normal;
  padding-right: 10px;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: end;
  -webkit-justify-content: flex-end;
      -ms-flex-pack: end;
          justify-content: flex-end;
}

form .form-checks {
  float: right;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  width: 84%;
  height: 45px;
}
form .form-check {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
}
form .form-check + .form-check {
  margin-left: 10px;
}
form .form-check {
  position: relative;
  min-height: 24px;
  padding-left: 24px;
}
form .form-check .form-check-input {
  position: absolute;
  left: 0;
  z-index: -1;
  width: 16px;
  height: 20px;
  margin: 0;
  opacity: 0
}
form .form-check .form-check-label {
  position: relative;
  vertical-align: top;
  margin-bottom: 0;
  font-weight: normal;
  line-height: 24px;
}
form .form-check .form-check-label::before {
  position: absolute;
  top: 4px;
  left: -24px;
  display: block;
  width: 16px;
  height: 16px;
  pointer-events: none;
  content: "";
  background-color: #fff;
  border: #adb5bd solid 1px;
  border-radius: 50%;
  transition: background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
}
form .form-check .form-check-label::after {
  position: absolute;
  top: 4px;
  left: -24px;
  display: block;
  width: 16px;
  height: 16px;
  content: "";
  background: no-repeat 50%/50% 50%;
}
form .form-check .form-check-input:checked ~ .form-check-label::before {
  color: #fff;
  border-color:rgba(0, 157, 66, .9);
  background-color:rgba(0, 157, 66, .9);
}
form .form-check .form-check-input:checked ~ .form-check-label::after {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fff'/%3e%3c/svg%3e");
}
form .form-code {
  text-align:left;
}


.max-sm-size form .form-code .codeImg {
    margin: 0;
}
.max-sm-size form .form-code .mainBtn {
  display:block;
  margin-top:15px;
}

form .form-code .codeImg {
  margin:0 12px;
}

form .form-code .mainBtn {
  display:inline-block;
  padding:0.55em 1.7em;
}

form .form-group input:not([type="radio"]):not([type="checkbox"]),
form .form-group select,
form .form-group textarea {
  font-size:15px;
  letter-spacing:.5px;
  width: 85%;
  max-width: 950px;
  float: right;
  margin-bottom: 13px;
  height: 40px;
  /*height: 45px;*/
  border: .5px solid #FFF;
  background-color:transparent;
  padding: 10px;
  box-sizing: border-box;
}



.max-sm-size form .form-group input:not([type="radio"]):not([type="checkbox"]),
.max-sm-size form .form-group select,
.max-sm-size form .form-group textarea {
  width: 80%;
}

.max-sm-size form .form-group label:not(.form-check-label) {
  width: 25%;
}

/*----form.homeC-----*/

form.homeC .form-group label:not(.form-check-label) {
  color:#FFF;
  font-size:15px;
  height:30px;
  margin:0;
  width: 20%;
  padding: 0;
  float:left;
}

form.homeC .form-group input.code:not([type="radio"]):not([type="checkbox"]) {
  width: 250px;
  float:left;
}

form.homeC .form-group input:not([type="radio"]):not([type="checkbox"]),
form.homeC .form-group select,
form.homeC .form-group textarea,
form.homeC .form-group .one,
form.homeC .form-group .form-checks {
  width: 75%;
  float: left;
  max-width: none;
  float: none;
  /*border: solid 1px #FFF !important;*/ /*0707註解*/
  height: 35px;
}

form.homeC .form-group .form-checks {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  margin-bottom: 13px;
}

form.homeC .form-group input:not([type="radio"]):not([type="checkbox"]):focus,
form.homeC .form-group select:focus,
form.homeC .form-group textarea:focus {
  background-color: transparent;
  border-color: #F5F5F5;
  color: rgba(255, 255, 255, .65);
}

form.homeC .form-group textarea {
  height: 140px;
}

form.homeC .form-group :-moz-placeholder { /* Mozilla Firefox 4 to 18 */
  color: #FFF;
}
form.homeC .form-group ::-moz-placeholder { /* Mozilla Firefox 19+ */
  color: #FFF;
}
form.homeC .form-group input:-ms-input-placeholder,
form.homeC .form-group textarea:-ms-input-placeholder {
  color: #FFF;
}
form.homeC .form-group input::-webkit-input-placeholder,
form.homeC .form-group textarea::-webkit-input-placeholder {
  color: #FFF;
}
form.homeC .form-group {/*0712新增*/
	position:relative;
}
form.homeC .code {/*0712新增*/
  /*float:right;*//*0712隱藏*/
  position: absolute;
  right:12px;
  top:1px;
}
@media (max-width: 480px) {/*0712新增*/
  form.homeC .code {
    right:8px;
  }
}

form.homeC .form-code {
  text-align:center;
}

form.homeC .btns-hr {
  margin: 2em auto;
}

/**/
/*.max-xs-size form.homeC .form-group,
.max-xs-size form.homeC {
  text-align:left !important;
}
.max-xs-size form.homeC .form-group label {
  text-align:left !important;
  width:100%;
  float:none;
}
.max-xs-size form.homeC .code {
  float: none;
}
.max-xs-size form.homeC .form-group input:not([type="radio"]):not([type="checkbox"]),
.max-xs-size form.homeC .form-group select,
.max-xs-size form.homeC .form-group textarea {
  width: 100%;
  max-width: none;
  float: none;
}

.max-xs-size form.homeC .form-group textarea {
  height: 80px;
}*/

/* ==========================================================================
    banner
 ========================================================================== */
.banner {
  position: relative;
  /*width: 100%;*/
  height: 40vh;
  max-height: 240px;
  -webkit-animation: fadeIn 1s both ease-in-out;
  animation: fadeIn 1s both ease-in-out;
}

.background{
  position: relative;
  background-size: cover;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.background > .pic {
  position:absolute;
  display:block;
  z-index: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  max-width: none;
}

/* ==========================================================================
    bannerBig
 ========================================================================== */
.bannerBig {
  position: relative;
  height: 830px;
  max-height: 90vh;
}

#product .bannerBig {
  z-index:99;
}

.bannerBig .background{
  position: relative;
}

.bannerBig .background:before {
  content:"";
  width:100%;
  height:100%;
  display:block;
  background-color: rgba(0, 0, 0, .2);
  position:absolute;
  top:0;
  left:0;
  right:0;
  bottom:0;
  z-index:1;
}


#aboutCompany .bannerBig .background:before {
  background-color: rgba(0, 0, 0, .1);
}

#aboutCertification .bannerBig .background:before {
  background-color: rgba(0, 0, 0, 0);
}

.bannerBig .inner {
  position: absolute;
  height: 100%;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
  /*max-width: 1365px;*/
}

.bannerBig .text {
  position: absolute;
  color: #545454;
  padding: 0 15px;
  width: 90%;
  text-align:center;
  /*max-width: 500px;*/
  top: 0;
  bottom: 0;
  left:0;
  right:0;
  margin: auto;
  z-index: 20;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: start;
  -webkit-align-items: flex-start;
      -ms-flex-align: start;
          align-items: flex-start;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  opacity: 0;
}

.bannerBig .text .slogan {
  font-size: 80px;
  font-family:Raleway;
  font-weight:300;
  margin: -.5em 0 .5em;
  width: 100%;
  text-transform: uppercase;
  
  -webkit-animation: fadeInUp 1s ease-in-out both;
          animation: fadeInUp 1s ease-in-out both;
}

.bannerBig .text .slogan + p {
  font-size: 30px;
  letter-spacing: .05em;
  line-height:1.2;
  margin:0 auto;
  
  -webkit-animation: fadeInUp 1s 0.5s ease-in-out both;
          animation: fadeInUp 1s 0.5s ease-in-out both;
}

.bannerBig .clickDown {
  background: url(images/product/clickscroll.png) center no-repeat;
  background-size:cover;
  width: 52px;
  height: 52px;
  /*width: 62px;
  height: 62px;*/
  display: block;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 7%;
  margin: auto;
  z-index: 99;
}

.max-md-size .bannerBig .clickDown {
  width: 57px;
  height: 57px;
}

.bannerBig .background {
  width: 100%;
  height: 100%;
}

.bannerBig.white .text {
  color: #fff;
}

.bannerBig.green .text {
  color: #667447;
}

.bannerBig.green .text .slogan {
  color:#7ba326;
  font-family:Angostura;
}

.bannerBig .banner .background {
  width: 110%;
  left: -5% !important;
  right: -5% !important;
  top: -5px;
  height: 855px;
  overflow: hidden;
}

.bannerBig .background img {
  opacity: 1;
}

.no-csstransforms3d .bannerBig .background img,
.no-csstransforms3d .bannerBig .text {
  opacity: 1;
}

.no-flexbox .bannerBig .text {
  display: block;
  top: 50%;
  bottom: auto;
  -webkit-transform: translateY(-50%);
      -ms-transform: translateY(-50%);
          transform: translateY(-50%);
}


.max-md-size .bannerBig {
  height: 740px;
}

.max-md-size .bannerBig .text .slogan {
  font-size:60px;
}

.max-md-size .bannerBig .text .slogan .pic {
  width:160px;
  display:inline-block;
}

.max-md-size .bannerBig .text .slogan .pic img {
  width:100%;
}

.max-sm-size .bannerBig .text .slogan .pic {
  width:120px;
}
.max-sm-size .bannerBig .text .slogan + p {
  font-size: 25px;
}


.max-xs-size .bannerBig .text .slogan {
  font-size:50px;
}

/* ==========================================================================
    home [banner]
 ========================================================================== */
#banner {
  position: relative;
  opacity: 0;        
  -webkit-animation: fadeIn 1s both ease-in-out;
  				animation: fadeIn 1s both ease-in-out;
  height:590px;/*HTC使用*/
  height:100vh;
}
#banner .slick-dots {
  display:none !important;
}
/*#banner ul {
  padding:0;
  margin: 0;
	list-style:none;
}*/
#banner .pic:before {
  content:"";
  background-color: rgba(34, 25, 16 ,.35 );
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index:1;
}

#banner .text {
  text-align:center;
  position: absolute;
  width: 60%;
  height: 60%;
  right:0;
  top: 40%;
  left: 0;
  margin: auto;
  z-index:2;
}

#banner .text .slogan {
  font-size: 60px;
  font-family: "微軟正黑體", Arial, sans-serif,  "蘭亭黑-繁", "黑體-繁", "新細明體-ExtB";
  font-weight:bold;
  color: #F0F0F0;
  margin: 0;
  line-height: 1.4;
  margin-bottom: .3em;
  letter-spacing:.1em;
}

#banner .text .slogan-s {
  font-size: 29px;
  font-family: "微軟正黑體", Arial, sans-serif,  "蘭亭黑-繁", "黑體-繁", "新細明體-ExtB";
  color: #F0F0F0;
  margin: 0;
  line-height: 2;
  letter-spacing:.05em;
}

#banner .text .slogan {
  -webkit-animation: fadeInUp 1s ease-in-out both;
          animation: fadeInUp 1s ease-in-out both;
}

#banner .text .slogan-s {
  -webkit-animation: fadeInUp 1s 0.5s ease-in-out both;
          animation: fadeInUp 1s 0.5s ease-in-out both;
}
/*size*/
.max-mds-size #banner .text .slogan {
  font-size: 50px !important;
}

.max-mds-size #banner .text .slogan-s {
  font-size: 23px;
  line-height: 1.6;
}

.max-md-size #banner .text {
  width: 90%;
   position: absolute;
  height: 60%;
  right:0;
  top: 40%;
  left: 0;
  margin: auto;
}

.max-md-size #banner .text .slogan {
  font-size: 47px !important;
}

.max-md-size #banner .text .slogan-s {
  font-size: 19px;
  line-height: 1.4;
}

/* ==========================================================================
    home [home-know]
 ========================================================================== */
.home-know {
  padding: 1.5em 0 5em 0;
  background-image: url(images/index/knowBg.jpg);
}

/*需增加嗎.min-sm-size .home-know .col-sm-3,
.min-sm-size .home-know .col-xs-6 {
    float: none;
    display: inline-block;
}*/

.home h2.hasBar {
  color:#4d4c4c;
  font-size:21px;
  font-weight:bold;
  text-align: center;
  margin: 3.9% 0 3.6% 0;
  /*width: 100%;*/
  overflow: hidden;
}

.home h2.hasBar > span {
  display: inline-block;
  position: relative;
  padding: 0 17px;
}

.home h2.hasBar > span:before {
  content: '';
  width: 1px;
  height: 10px;
  display: inline-block;
  background-color: #696867;
  position: absolute;
  top: 20%;
  left: 0px;
}

.home h2.hasBar > span:after {
  content: '';
  width: 1px;
  height: 10px;
  display: inline-block;
  background-color: #696867;
  position: absolute;
  top: 20%;
  right: 0px;
}

/*顏色*/
.home h2.hasBar.color {
  color:#df201d;
}

.green.home h2.hasBar.color {
  color:#009d42;
}

.home h2.hasBar.color > span:before,
.home h2.hasBar.color > span:after {
  background-color: #df201d;
}

.green.home h2.hasBar.color > span:before,
.green.home h2.hasBar.color > span:after {
  background-color: #009d42;
}

/**/
.home-know {
  text-align: center;
}

.min-sm-size .home-know .col-sm-3,
.min-sm-size .home-know .col-xs-6 {
  float: none;
  display: inline-block;
}

.home-know .row {
  margin-bottom: 3em;
}

.home-know .row > div {
  text-align: center;
}

.home-know .row > div .pic img {
  height: 200px;
  margin-bottom: .5em;
  transition: opacity .3s ease;
}

.home-know .row > div .pic {
  position:relative;
  overflow:hidden;
  min-height:100px;
}

.home-know .row > div .pic:after {
  content: "";
  width: 100%;
  height: 100%;
  background-image: url(images/index/inco-zoom.png);
  background-repeat: no-repeat;
  display: block;
  position: absolute;
  top:0;
  right:0;
  bottom:0;
  left:0;
  /*right: -100%;
  bottom: -100%;*/
  opacity:0;
  transition:right .2s .4s ease-in-out , bottom .2s .4s ease-in-out, opacity .3s .3s ease-in-out ,transform .3s .15s ease-in-out;
  transform:  scale(.8);
  -webkit-transform:  scale(.8);
}

.home-know .row > div:hover .pic:after {
  opacity:1;
  transform:  scale(.9);
  -webkit-transform:  scale(.9);
  /*right: 0;
  bottom: 0;*/
}

.home-know .row > div:hover img {
  opacity:.6;
}

.home-know .caption {
  padding:0 .5%;
  margin:0;
}

.home-know .caption .cn {
  color:#333;
  font-size:22px;
  font-weight:bold;
  display:block;
  margin:0;
}

.home-know .caption .en {
  color: #999;
  font-size: 14px;
  letter-spacing:.5px;

  text-transform: uppercase;
}

.max-md-size .home-know .row > div .pic img {
  width: 100%;
  height: auto;
}
.max-sm-size .home-know .row > div.col-xs-6 {
  width: 33%;
}
.max-sm-size .home-know .row > div .pic:after {
  width: 95%;
  height: 90%;
  margin: auto;
  background-size: cover;
  background-position: center;
}
.max-xs-size .home-know .row > div.col-xs-6 {
  width: 100%;
}
.max-xs-size .home-know .row > div {
  margin: 5px 0;
}
.max-xs-size .home-know .row > div .pic {
  height:180px;
}
.max-xs-size .home-know .row > div .pic:after {
  width: 80%;
  height: 90%;
  margin: auto;
  background-size: cover;
  background-position: center;
}

/* ==========================================================================
    home [home-mv]
 ========================================================================== */
/*.box-home {
  opacity:1;
  transition:opacity .4s ease-in-out;
}


.box-home.actived {
  opacity:0;
  
}*/

.home-mv .box {
  width:100%;
  height:100%;
  background: red;
}

/*.home-mv .box .mask:after {
  content:"";
  width:100%;
  height:100%;
	position:absolute;
	z-index:1;
	background-color: rgba(0, 0, 0, .3);
	transition:all .4s;
}*/

.home-mv .mask {
    width: 100%;
    height: 100%;
    display: block;
    /*background-color: rgba(0, 0, 0, .3);*/
    position: absolute;
    left: 0;
    top: 0;
    z-index: 2;
    /*opacity: 0;*/
    /*transition:all .4s;*/
    opacity: 1;
    background-image: radial-gradient(circle, rgba(0,0,0,0.1) 0%, rgba(0,0,0,0.3) 100%);
    /*		-ms-transition: opacity .4s ease, -ms-transform .4s ease-in-out;
    -webkit-transition: opacity .4s ease, -webkit-transform .4s ease-in-out;
   				  transition: opacity .4s ease, transform .4s ease-in-out;*/
    		-ms-transition: opacity .4s ease-in-out;
    -webkit-transition: opacity .4s ease-in-out;
   				  transition: opacity .4s ease-in-out;
}

.home-mv .cb-container-inner:hover .mask {
    z-index: 0;
    opacity: 0;
    
    /*-ms-transform: scale(1.05);
    -webkit-transform: scale(1.05);
    transform: scale(1.05);*/
}

/*.home-mv .home-mv-embedded:after {
	content:"";
  width:100%;
  height:100%;
	position:absolute;
	z-index:1;
	background-color: rgba(0, 0, 0, .3);
	transition:all .4s;
}

.max-md-size .home-mv .home-mv-embedded:after {
  display:none !important;
}*/

.home-mv:hover .home-mv-embedded:after{
	background-color: rgba(0, 0, 0, 0);
  display:none;
}

/*.max-md-size .home-mv .box  {
  display:none;
}*/

/*.max-sm-size .home-mv .box {
  display:none;
}*/

/*.home-mv .box:after {
  content:"";
  position: absolute;
  z-index: 1;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, .2);
}


.max-md-size .box:after {
  display:none !important;
}*/

.home-mv .box .play {
  background-image: url(images/index/play.png);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 100%;
  width: 80px;
  height: 80px;
  display: block;
  margin: 0 auto 20px auto;
  background-size: contain;
  /*置中*/
  position: absolute;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
  margin: auto;
  width: 100%;
  text-align: center;
  z-index: 3;
  cursor: pointer;
}

.max-sm-size .home-mv .box .play {
  width: 670px;
  height: 75px;
  /*置中*/
  position: absolute;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
  margin: auto;
  width: 100%;
  text-align: center;
  z-index: 3;
}

.home-mv .box .info {
  font-size: 30px;
  color: #F0F0F0;
  line-height: 1.5;
  
  position: absolute;
  top: 59%;
  -webkit-transform: translateY(-50%);
      -ms-transform: translateY(-50%);
          transform: translateY(-50%);
  margin: auto;
  width: 100%;
  text-align: center;
  z-index: 2;
}

.max-md-size .home-mv .box .info {
  font-size:26px;
  top: inherit;
  bottom:20px;
  line-height:1;
}

/*.max-sm-size .home-mv .box .info {
  display:none;
}*/

.home-mv .box .background{
  width: 100%;
  height: 100%;
  display: block;
  position: absolute;
  z-index: 1;
  left: 0px;
  top: 0px;
}


.home-mv .more {
  color:#000;
  font-size:15px;
  text-shadow: 1px 1px 10px rgba(255,255,255, .8);
  display: inline-block;
  
  position: absolute;
  top: 80%;
  left:0;
  right:0;
  -webkit-transform: translateY(-50%);
      -ms-transform: translateY(-50%);
          transform: translateY(-50%);
  margin: auto;
  width:200px;
  text-align: center;
  z-index: 4;
}
.home-mv .more span {
  padding:5px 15px;
}
.home-mv .more:hover span {
  color:#FFF;
  background-color: rgba(200,40,40, .5);
  border-radius:10px;
}
.home-mv .more i {
  display:block;
  margin-bottom:5px;
}
/*.home-mv .background {
  width: 100%;
  height: 100vh;
  max-height: 980px;
  min-height: 250px;
  
  position: absolute;
  top: 50%;
  -webkit-transform: translateY(-50%);
      -ms-transform: translateY(-50%);
          transform: translateY(-50%);
  margin: auto;
  width: 100%;
  text-align: center;
  z-index: 0;
}*/

/*滿版影片*/
video {
  display: inline-block;
  vertical-align: baseline;
}

/*.cb-container {
  margin: 0 20px;
}

@media (min-width: 375px) {
  .cb-container {
    margin: 0 25px;
  }
}

@media (min-width: 768px) {
  .cb-container {
    margin: 0 50px;
  }
}

@media (min-width: 1366px) {
  .cb-container-inner {
    padding: 0 70px;
  }
}*/

.home-mv-wrap {
  position: relative;
}

.home-mv-video video {
  width: 100% !important;
}

.home-mv-embedded {
  position: relative;
  padding-bottom: 56.25%;
  max-width: 100%;
  height: auto;
  height: 100%;
  z-index:1;
}

.home-mv-embedded iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.home-mv.-auto,
.home-mv.-auto .home-mv-wrap {
  height: 100vh;
}

.home-mv.-double,
.home-mv.-double .home-mv-wrap {
  height: 200vh;
}

/* ==========================================================================
    home [共用]
 ========================================================================== */
.links {
  /*text-align: center;
  display: block;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -webkit-flex-direction: row;
      -ms-flex-direction: row;
          flex-direction: row;
  -webkit-box-align: stretch;
  -webkit-align-items: stretch;
      -ms-flex-align: stretch;
          align-items: stretch;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
      -ms-flex-pack: justify;
          justify-content: space-between;
  position:relative;*/
}

.links .list {
  display: block;
  float:left;
  width: 32.7%;
  height:355px;
  margin:.3%;
  overflow: hidden;
  position: relative;
}

/*size*/

.max-bg-size .links .list {
  height:300px;
}

/*.max-md-size .links .list {
  width: 49.3%;
}
.max-sm-size .links .list {
  width: 49%;
}*/
.max-sm-size .links .list {
  width: 100%;
}
.max-xs-size .links .list {
  height:300px;
}

.links .list .pic {
  position:absolute;
  z-index: 1;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  /*position:absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  margin:auto;*/
  -webkit-transform: scale(1);
      -ms-transform: scale(1);
          transform: scale(1);
  -webkit-transition: 1s ease-out;
          transition: 1s ease-out;
}

.links .list:hover .pic {
  -webkit-transform: scale(1.1);
      -ms-transform: scale(1.1);
          transform: scale(1.1);
  -webkit-transition: 1s ease-out;
          transition: 1s ease-out;
}


.links .list .inner {
    color: #FFF;
    text-align: center;
}

.home-case .links .list .inner {
    background-image: radial-gradient(circle, rgba(0,0,0,0.6) 0%, rgba(0,0,0,0.85) 100%);
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index:1;
    opacity: 0;
    
    -webkit-transition: All 0.4s ease-in-out;
    -moz-transition: All 0.4s ease-in-out;
    -o-transition: All 0.4s ease-in-out;
    -ms-transition: All 0.4s ease-in-out;
    transition: All 0.4s ease-in-out;
}

.links .list:hover .inner {
    opacity: 1;
}

.links .list .time {
  color: #FFF;
  font-size: 20px;
  font-family: Arial, Helvetica, sans-serif;
  -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
      filter: alpha(opacity=0);
	opacity: 0; 
  -webkit-transition: all .2s ease-in-out;
     -moz-transition: all .2s ease-in-out;
       -o-transition: all .2s ease-in-out;
      -ms-transition: all .2s ease-in-out;
          transition: all .2s ease-in-out;
}

.links .list h3 {
  color: #B1B1B1;
  font-size: 14px;
  margin:5px 0 20px 0;
  -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
      filter: alpha(opacity=0);
	opacity: 0; 
  -webkit-transition: all .2s ease-in-out;
     -moz-transition: all .2s ease-in-out;
       -o-transition: all .2s ease-in-out;
      -ms-transition: all .2s ease-in-out;
          transition: all .2s ease-in-out;
}

.links .list h4 {
  height:100px;
  overflow:hidden;
  font-size:26px;
  line-height:1.4;
  -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
      filter: alpha(opacity=0);
	opacity: 0;  
  -webkit-transition: all 0.2s linear , letter-spacing 2s ease;
     -moz-transition: all 0.2s linear , letter-spacing 2s ease;
       -o-transition: all 0.2s linear , letter-spacing 2s ease;
      -ms-transition: all 0.2s linear , letter-spacing 2s ease;
          transition: all 0.2s linear , letter-spacing 2s ease;
}

.links .list .more {
  font-size:14px;
  width:105px;
  height:40px;
  line-height:35px;
  padding:0;
  display: inline-block;
  background-color:#df201d;
  -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
      filter: alpha(opacity=0);
	opacity: 0;
  -webkit-transition: all .2s ease-in-out;
     -moz-transition: all .2s ease-in-out;
       -o-transition: all .2s ease-in-out;
      -ms-transition: all .2s ease-in-out;
          transition: all .2s ease-in-out;
}

.green .links .list .more {
  background-color:#009d42;
}

/**/
.links .list:hover time,
.links .list:hover h3,
.links .list:hover h4 {
	-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";
      filter: alpha(opacity=100);
	opacity: 1;
}

.links .list:hover h4 {
  -webkit-transition-delay: .2s;
     -moz-transition-delay: .2s;
       -o-transition-delay: .2s;
      -ms-transition-delay: .2s;
          transition-delay: .2s;
}

.links .list:hover .more {
  filter: alpha(opacity=100);
  opacity: 1;
  -webkit-transition: opacity .4s .4s ease-in-out;
     -moz-transition: opacity .4s .4s ease-in-out;
       -o-transition: opacity .4s .4s ease-in-out;
      -ms-transition: opacity .4s .4s ease-in-out;
          transition: opacity .4s .4s ease-in-out;
}

.max-md-size .links .list .inner {
    opacity: 1;
    background-image: radial-gradient(circle, rgba(0,0,0,0.6) 0%, rgba(0,0,0,0.3) 100%);
}

.max-md-size .links .list .inner .text {
    width: 85%;
}

.max-md-size .links .list time,
.max-md-size .links .list h3,
.max-md-size .links .list h4 {
	-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";
      filter: alpha(opacity=100);
	opacity: 1;
}

.max-md-size .links .list h4 {
  font-size:23px;
}

.max-md-size .links .list .more {
  filter: alpha(opacity=100);
  opacity: 1;
}

/*.max-md-size .links .list h4 {
  font-size:25px;
  line-height:1.3;
}*/

.max-sm-size .links .list .time {
  font-size:18px;
}

.max-xs-size .links .list .inner .text {
    width: 90%;
}

.max-xs-size .links .list .time {
  font-size:16px;
}

.max-xs-size .links .list h4 {
  font-size:22px;
  line-height:1.4;
}

.max-xs-size .links .list .inner {
  background-color:rgb(0,0,0);
	/*ie8*/ filter: progid:DXImageTransform.Microsoft.Alpha(opacity=50); 
	background-color:rgba(0,0,0,0.5);
}

.max-xs-size.ios .links .list .inner {
  background-color:rgb(0,0,0);
	/*ie8*/ filter: progid:DXImageTransform.Microsoft.Alpha(opacity=15); 
	background-color:rgba(0,0,0,0.15);
}


/* ==========================================================================
    home [home-news]
 ========================================================================== */
/*.home-news .links .list:hover h4 {
  -webkit-transform: translateY(0px);
     -moz-transform: translateY(0px);
       -o-transform: translateY(0px);
      -ms-transform: translateY(0px);
          transform: translateY(0px);
  -webkit-transition-delay: .1s;
     -moz-transition-delay: .1s;
       -o-transition-delay: .1s;
      -ms-transition-delay: .1s;
          transition-delay: .1s;
}

.home-news .links .list:hover .more {
  -webkit-transition: opacity .4s .2s ease-in-out;
     -moz-transition: opacity .4s .2s ease-in-out;
       -o-transition: opacity .4s .2s ease-in-out;
      -ms-transition: opacity .4s .2s ease-in-out;
          transition: opacity .4s .2s ease-in-out;
}*/

.home-news .links .list .pic {
  -webkit-transition: .6s ease-out;
          transition: .6s ease-out;
}

.home-news .links .list:hover .pic {
  -webkit-transition: .6s ease-out;
          transition: .6s ease-out;
}

.home-news .links .list h4 {
  font-size:22px;
  padding:0 10px;
  /*-webkit-transform: translateY(20px);
     -moz-transform: translateY(20px);
       -o-transform: translateY(20px);
      -ms-transform: translateY(20px);
          transform: translateY(20px);*/
  -webkit-transition: transform 0.2s ease-in-out;
     -moz-transition: transform 0.2s ease-in-out;
       -o-transition: transform 0.2s ease-in-out;
      -ms-transition: transform 0.2s ease-in-out;
          transition: transform 0.2s ease-in-out;
}

.home-news .links .list .inner {
  width:100%;
  opacity:1;
  height:160px;
  /*height:200px;*/
  padding:20px 0;
  position:absolute;
  bottom:0;
  /*bottom:-120px;*/
  background-color: rgba(0, 0, 0, .5);
  z-index:1;
  -webkit-transition: all .45s cubic-bezier(0.785, 0.135, 0.150, 0.860); 
     -moz-transition: all .45s cubic-bezier(0.785, 0.135, 0.150, 0.860); 
       -o-transition: all .45s cubic-bezier(0.785, 0.135, 0.150, 0.860); 
          transition: all .45s cubic-bezier(0.785, 0.135, 0.150, 0.860); /* easeInOutCirc */
}

.home-news .links .list:hover .inner {
  bottom:0;
  background-color: rgba(0, 0, 0, .75);
}

.home-news .links .list time,
.home-news .links .list h3,
.home-news .links .list h4 {
	opacity: 1;
}

.home-news .links .list .more {
  opacity: 1;
  display:none;
}

.max-md-size .home-news .links .list .inner {
  bottom:0;
  background-color: rgba(0, 0, 0, .1);
}

.max-md-size .home-news .links .list .inner .text {
     width:100%;
}
.max-md-size .home-news .links .list h4 {
  font-size:21px;
    /*-webkit-transform: translateY(0px);
    -moz-transform: translateY(0px);
    -o-transform: translateY(0px);
    -ms-transform: translateY(0px);
    transform: translateY(0px);*/
    -webkit-transition-delay: .1s;
    -moz-transition-delay: .1s;
    -o-transition-delay: .1s;
    -ms-transition-delay: .1s;
    transition-delay: .1s;
}

/* ==========================================================================
    home [home-news]
 ========================================================================== */
.home-case .links .list .inner .text {
    width: 75%;
    transform: translateX(-50%) translateY(-50%);
    -webkit-transform: translateX(-50%) translateY(-50%);
    display: inline-block;
    position: absolute;
    top: 50%;
    left: 50%;
    right: auto;
    bottom: auto;
    z-index: 1;
}

.home-case .links .list h4 {
  letter-spacing:5px;
}

.home-case .links .list:hover h4 {
  letter-spacing:1.5px;
}

.max-md-size .home-case .links .list h4 {
    letter-spacing: 1.5px;
}


/* ==========================================================================
    home [mouse]
 ========================================================================== */
.home .mouse{
  position: absolute;
  z-index: 999;
  width: 38px;
  display: block;
  bottom: 5px;
  margin-bottom: 70px;
  left: 50%;
  background-image: url(images/index/mouse.png);
  background-size: 100%;
  height: 78px;
  margin-left: -19px;
  background-repeat: no-repeat;
  background-position: center;
  opacity: 0;
  cursor: pointer;
}

/*.max-xs-size .home .mouse{
  display:none;
}*/

.home .mouse img{
  width: 12px;
  position: relative;
  top: 28px;
  left: 13px;
  -webkit-animation: mouse-act 3s infinite; /* Chrome, Safari, Opera */
  animation: mouse-act 3s infinite;
}

.max-bgs-size .home .mouse{
  bottom: 20px;
  margin-bottom: 20px;
}

.max-xs-size .home .mouse{
  bottom: 5px;
  margin-bottom: 5px;
}

/* ==========================================================================
    home-contact
 ========================================================================== */
.home-contact {
  position:relative;
  height:980px;
}

.home-contact .bg {
  position: absolute;
  z-index: 1;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}

.home-contact .inner {
  color: #fff;
  text-align:center;
  max-width: 735px;
  padding: 6vh 6%;
  background-color: rgba(172,29,21,0.85);
  /*置中*/
  transform: translateX(-50%) translateY(-50%);
  -webkit-transform: translateX(-50%) translateY(-50%);
  display: inline-block;
  position: absolute;
  top: 50%;
  left: 50%;
  right: auto;
  bottom: auto;
  z-index: 1;
}

.green .home-contact .inner {
  background-color: rgba(0,88,37,0.85);
}

.max-xs-size .home-contact .inner {
  max-width: 90%;
  padding: 6vh 5%;
}

.home-contact h2.hasBar {
  color:#FFF;
  font-size:21px;
  font-weight:bold;
  text-align: center;
  margin: 0;
  /*width: 100%;*/
  overflow: hidden;
}

.home-contact h2.hasBar > span {
  display: inline-block;
  position: relative;
  padding: 0 17px;
}

.home-contact h2.hasBar > span:before,
.home-contact h2.hasBar > span:after {
  display:none;
}

.home-contact .note {
  font-size:1em;
  color: rgba(255, 255, 255, .65);
  padding: 2vh 0 3vh 0;
}

/* ==========================================================================
    about
 ========================================================================== */
.about div[class^="showcase"] {
  position: relative;
}

/*.about div[class^="showcase"] .container {
  position: relative;
  height: 100%;
}*/

/*#about .section-2 {
  padding:40px 0 40px 0;
}*/

#about .section-2 .box {
  padding: 1.5em 3em;
}

#about .section-2 .box > .heading {
  text-align:center;
  line-height:1.4;
  margin:20px 0;
}

#about .section-2 .box > .heading > .cn {
  color:#000;
  font-size:20px;
  font-weight:bold;
  display:block;
  margin:5px 0;
}

#about .section-2 .box > .heading > .en {
  color: #999;
  font-size: 16px;
  display: block;
  letter-spacing:.5px;
  font-family: "微軟正黑體";
  height:45px;
  overflow:hidden;
}

#about .section-2 .box .pic {
  text-align:center;
  width:150px;
  height:130px;
  margin:auto auto 50px auto;
}

#about .section-2 .box .pic img {
  max-height:100%;
}

#about .section-2 .box p {
  color:#666;
  font-size:15px;
  line-height:2.2;
}

/*size*/
.max-bg-size #about .section-2 .box {
  padding: 1.5em 1em;
  
}
.max-bg-size #about .section-2 .box > .heading > .cn {
  min-height:56px;
}

.max-md-size #about .section-2 .box p {
  line-height:30px;
}
.max-sm-size #about .section-2 .box {
  padding: 1 0;
  border-top: 1px solid #CCC;
}
.max-sm-size #about .section-2 .box:first-child {
  border-top: 1px solid transparent;
}
.max-sm-size #about .section-2 .box > .heading > .cn {
  min-height: inherit;
}
.max-sm-size #about .section-2 .box .pic {
    margin: auto auto 20px auto;
}

/* ==========================================================================
    aboutCompany
 ========================================================================== */

#aboutCompany .section .textCont {
  text-align:left;
  padding:40px 0;
}

#aboutCompany .section-2 p {
  color:#FFF;
}
.max-md-size #aboutCompany .section-2 p {
  line-height:2.1;
}
.max-xs-size #aboutCompany .section-2 {
  min-height:580px;
  height: auto;
}
.max-xs-size #aboutCompany .section-2 p {
  font-size:14px;
  line-height:2;
}

/*== license2 輪播共用  =========================== */
.license2 {
  padding-bottom:40px;
  visibility: hidden;
}

.license2 .slider {
  padding: 0 5%;
}

.license2 .slick-track,
.license-store .slick-track{
  text-align:center;
  margin-left:auto;
  margin-right:auto;
}

.license2 .slick-list,
.license-store .slick-list {
  text-align:center;
}

.license2 .slider .slick-track {
  padding: 10px 0;
}

.license2 .slider .item {
  float:none;
  display:inline-block;
  -webkit-transform: scale(0.95);
      -ms-transform: scale(0.95);
          transform: scale(0.95);
  /*-webkit-transition: .5s;
          transition: .5s;*/
  text-align: center;
}
.license-store .slider .item {
  float:none;
}

.license2 .slider .item .pic {
  /*border: 3px solid transparent;*/
  box-shadow: 0 0 5px transparent;
  max-width: 215px;
  height:215px;
  overflow:hidden;
  margin: auto;
  display: block;
  position:relative;
  transition:transform ease-out .4s;
}

.license2 .slider .item span,
.license-store .slider .item span {
  display: block;
  padding: 0 10px;
  width: 100%;
  height: 100%;
  background-color: transparent;
  /*background-color: #fff;*/
}

.license2 .slider .item:hover .pic {
  -moz-transform:scale(1.1);
  -webkit-transform:scale(1.1);
  -o-transform:scale(1.1);
  -ms-transform:scale(1.1);
  transform:scale(1.1);
}

/*.license2 .slider .item:hover .pic {
  border: 3px solid #fe0000;
}*/

/*.license2 .slider .item .pic:before {
  content:"";
  width:100%;
  height:100%;
  display:block;
  background-color: rgba(225, 35, 35, 0);
  position:absolute;
  z-index:2;
}

.license2 .slider .item:hover .pic:before {
  background-color: rgba(225, 35, 35, .15);
}*/

.license2 .slider .item a img {
  max-width: 100%;
   /*置中*/
  transform: translateX(-50%) translateY(-50%);
  -webkit-transform: translateX(-50%) translateY(-50%);
  display: inline-block;
  position: absolute;
  top: 50%;
  left: 50%;
  right: auto;
  bottom: auto;
  z-index: 1;
}

.license2 .slider .item h4 {
  text-align: center;
  font-size: 16px;
  margin: 1.5em auto 0 auto;
  max-width: 215px;
  transition: all .5s ease;
}

.license2 .slider .item:hover h4 {
  color:#007400;
}

.license2 .slider .item:hover {
  -webkit-transform: scale(1);
      -ms-transform: scale(1);
          transform: scale(1);
  -webkit-transition: .5s;
          transition: .5s;
}

/**/
.license-store .slider .item {
  -webkit-transform: scale(1);
      -ms-transform: scale(1);
          transform: scale(1);
}
.license-store .slider .pic {
  /*max-width: 215px;
  height: 215px;
  overflow: hidden;
  margin: auto;
  display: block;
  position: relative;*/
  /*background-image: url(images/contact/no-logo.png);*/
  background-repeat: no-repeat;
  background-position: center center;
  background-size:cover;
}

/**/
/*.license-store.soon-pic .slider .pic {
  background-image: url(images/technical/comming-soon.png);
  background-size:cover;
}*/

.license-store .slider .item .pic img {
  max-width: 100%;
  max-height: 100%;
   /*置中*/
  transform: translateX(-50%) translateY(-50%);
  -webkit-transform: translateX(-50%) translateY(-50%);
  display: inline-block;
  position: absolute;
  top: 50%;
  left: 50%;
  right: auto;
  bottom: auto;
  z-index: 1;
}

.license-store .slider .item .pic span:before {
  content:"";
  background-color: transparent;
  /*background-color:#FFF;*/
  width: 100%;
  height: 100%;
  display:block;
  border-radius:100%;
}

.license-store .slider .item .text {
  color:#9d9c9c;
  font-size:14px;
}

.license-store .slider .item .text .store {
  color:#000;
  font-size:16px;
  text-align:center;
  margin-top:20px;
  margin-bottom:5px;
  transition: all .5s ease;
}

.license-store .slider .item:hover .text .store {
  color: #007400;
}

.license-store .slider .item .text p {
  margin-top:0;
  margin-bottom:0;
}

.license-store .slider .item .text p.tel {
  margin-bottom:5px;
}

/*size*/
.max-sm-size .license2 .slider .item a {
  max-width: 185px;
  height:185px;
}
.max-sm-size .license-store .slider .pic {
  max-width: 185px;
  height: 185px;
}

.max-xs-size .license2 .slider .item a {
  max-width: 165px;
  height:165px;
}
.max-xs-size .license-store .slider .pic {
  max-width: 165px;
  height: 165px;
}

/*輪播按鈕*/
.max-lg-size .license2 .slick-prev {
  top: 35%;
  left: 5px;
}

.max-lg-size .license2 .slick-prev:hover {
  left: -5px;
}

.max-lg-size .license2 .slick-next {
 top: 35%;
 right: 5px;
}

.max-lg-size .license2 .slick-next:hover {
 right: -5px;
}

.max-sm-size .license2 .slick-prev,
.max-sm-size .license2 .slick-next {
    width: 50px;
    height: 50px;
}

.max-sm-size .license2 .slick-prev,
.max-sm-size .license2 .slick-next {
  color: rgba(203, 203, 203);
  border-color: rgba(203, 203, 203);
}

/*.max-sm-size .license2 .slick-prev:hover,
.max-sm-size .license2 .slick-prev:focus,
.max-sm-size .license2 .slick-next:hover,
.max-sm-size .license2 .slick-next:focus {
  color: rgba(230, 6, 23, .6);
  border-color: rgba(230, 6, 23, .6);
}*/

/* ==========================================================================
    aboutCompany
 ========================================================================== */
#aboutCompany .section-2 {
  height: 580px;
  background-color:transparent;
  position: relative;
}

#aboutCompany .section-2 .textCont {
  color:#FFF;
  font-size:18px;
  letter-spacing:.5px;
  line-height:2.8;
  
  /*置中*/
  transform: translateX(-50%) translateY(-80%);
  -webkit-transform: translateX(-50%) translateY(-80%);
  display: inline-block;
  position: absolute;
  top: 80%;
  left: 50%;
  right: auto;
  bottom: auto;
  z-index: 1;
}

#aboutCompany .section-2 .background {
  height: 580px;
  /*position: absolute;
  width: 100%;
  top: 0;
  left: 0;*/
}
/*#aboutCompany .section-2 .background > .pic {
    position: absolute;
    display: block;
    z-index: 0;
    width: 100%;
    height: 100%;
    background-color: #000;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    max-width: none;
}*/

#aboutCompany .section-3 {
  padding: 20px 0;
  background-image: url(images/about/about-map-bg.jpg);
}

.opa0 {
  opacity: 0;
}
/*.max-md-size .opa1 {
  opacity: 1;
}*/

/*#aboutCompany .section-3 .opa0 {
  opacity: 0;
}*/

#aboutCompany .section-3 .html {
  text-align:left;
}

/*== aboutList 場所列表about限定  =========================== */
.aboutList {
  text-align:center;
  padding:0;
  margin:0;
}

.aboutList li {
  width: 20%;
  margin:-3.5px -1.8px;
  overflow: hidden;
  display:inline-block;
}

.aboutList li a {
  text-align: center;
  height: 290px;
  display: block;
  position: relative;
  cursor:default;
}

.aboutList li .pic {
  position: absolute;
  z-index: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  opacity: 1;
}

.aboutList li .pic img{
  background-size: cover;
}

.aboutList li .inner {
  color: #FFF;
  text-align: center;
  background-color: rgba(0,0,0,0.4);
  width: 100%;
  height:100%;
  position: absolute;
  top: 30px;
  left: 0;
  right: 0;
  bottom: 0;
  opacity:0;
  				transition: All 0.4s ease-in-out;
  -webkit-transition: All 0.4s ease-in-out;
     -moz-transition: All 0.4s ease-in-out;
       -o-transition: All 0.4s ease-in-out;
      -ms-transition: All 0.4s ease-in-out;
}

.aboutList li:hover .inner {
  top: 0;
  opacity:1;
}

.aboutList li .inner:after {
  content:"";
  width: 88%;
  height:86%;
  margin:auto;
  display:block;
  border: 3px solid #FFF;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 2;
}

.aboutList li .text {
  width:75%;
  
  transform: translateX(-50%) translateY(-50%);
  -webkit-transform: translateX(-50%) translateY(-50%);
  display: inline-block;
  position: absolute;
  top: 50%;
  left: 50%;
  right: auto;
  bottom: auto;
  z-index: 1;
}

.aboutList li .text .subject {
  font-size:36px;
  line-height:1.2;
  max-height:100px;
  overflow:hidden;
  margin:0;
  padding:10px 0 0 0;
}

/*size*/
.max-md-size .aboutList {
  padding: 3% 0;
}

.max-md-size .aboutList li .inner {
  /*background-color: rgba(0,0,0,0.3);*/
  background-color: rgba(225, 35, 35, .3);
  top: 0;
  opacity:1;
}

.green .max-md-size .aboutList li .inner {
  background-color: rgba(20, 130, 50, .3);
}

.max-md-size .aboutList li .inner:after {
  opacity:.6;
}

.max-md-size .aboutList li a {
  height: 330px;
}

.max-md-size .aboutList li .text .subject {
  font-weight:bold;
  height: auto;
  text-shadow: 0px 1px 3px rgba(0,0,0,0.65);
}

.max-sm-size .aboutList li .text .subject {
  font-size:23px;
}

.max-xs-size .aboutList {
  padding: 6% 0;
}

.max-xs-size .aboutList li {
  width: 100%;
}

.max-xs-size .aboutList li a {
  height: 280px;
}


/* ==========================================================================
  aboutCompany  [ .yearBox .years ] 品牌軌跡
 ==========================================================================*/
#aboutCompany .section-4 {
  padding:30px 0;
}

#aboutCompany .section-4 > .heading {
  text-align:center;
  line-height:1.4;
  margin:20px 0 0 0;
}

.max-sm-size #aboutCompany .section-4 > .heading {
  margin:20px 0 30px 0;
}

#aboutCompany .section-4 > .heading > .cn {
  color:#000;
  font-size:20px;
  font-weight:bold;
  display:block;
  margin:5px 0;
}

#aboutCompany .section-4 > .heading > .en {
  color: #999;
  font-size: 18px;
  display: block;
  letter-spacing:1px;
  font-family: "微軟正黑體";
  height:45px;
  overflow:hidden;
}

.InnerWrapper {
	min-width: 1020px;
	width: 95%;
	display: block;
	margin:auto;
	position: relative;
}
.max-md-size .InnerWrapper {
  width: 85%;
	min-width: 85%;
}

#aboutCompany .yearBox {
	width: 90%;
	margin:50px auto;
	clear: both;
	text-align:left;
}

#aboutCompany .loneLine {
	width: 95%;
	height: 1px;
	display: block;
	background: #df201d;

	position: absolute;
	top:58px;
	margin-left:-3%;
}

.green #aboutCompany .loneLine {
	background: #009d42;
}

#aboutCompany .loneLine:before,
#aboutCompany .loneLine:after {
	content: " ";
	width: 10px;
	height: 10px;
	display: block;
	background: #df201d;
	position: absolute;
	border-right: 99em;
	top: -5px;
  border-radius:100%;
}

.green #aboutCompany .loneLine:before,
.green #aboutCompany .loneLine:after {
	background: #009d42;
}

#aboutCompany .loneLine:after {
	right: 0;
}

#aboutCompany .yearBox .years{
	margin:10px 30px;
	text-align: center;
	display: block;
	float: left;
	cursor: pointer;
}
.max-bg-size #aboutCompany .yearBox .years{
	margin:10px 20px;
}

#aboutCompany .yearBox p {
	font-size: 15px;
	color: #000;
	margin: 0;
}

#aboutCompany .yearBox p.year {
  font-size: 18px;
  font-weight: bold;
  font-family: Angostura;
  letter-spacing:1px;
  margin-bottom:20px;
}

#aboutCompany .yearBox p.info {
  margin-top:25px;
  text-align:left;
}

#aboutCompany .yearBox .caret-triangle{
  width:5px;
  height:10px;
  background-color:#df201d;
	display: inline-block;
	text-align: center;
}

.green #aboutCompany .yearBox .caret-triangle{
  background-color:#009d42;
}

#aboutCompany .yearBox  button{
	top:48px;
}

#aboutCompany .slick-prev {
  left: -55px;
}

#aboutCompany .slick-next {
	right: -38px;
}

/*.max-md-size #aboutCompany .slick-prev {
  left: -25px !important;
}

.max-md-size #aboutCompany .slick-prev:hover {
  left: -25px !important;
}

.max-md-size #aboutCompany .slick-next {
	right: -25px !important;
}

.max-md-size #aboutCompany .slick-next:hover {
	right: -25px !important;
}*/

#aboutCompany .slider .slick-prev,
#aboutCompany .slider .slick-next {
  height: 40px;
  width: 40px;
  display: block;
  color: #fff;
  background: #df201d;
}

.green #aboutCompany .slider .slick-prev,
.green #aboutCompany .slider .slick-next {
  background: #009d42;
}

#aboutCompany .slider .slick-prev:hover, 
#aboutCompany .slider .slick-next:hover  {
	background: #e04845;
}

.green #aboutCompany .slider .slick-prev:hover, 
.green #aboutCompany .slider .slick-next:hover  {
  background-color: #1EAA6F;
}

#aboutCompany .slick-prev.slick-disabled,
#aboutCompany .slick-next.slick-disabled {
	display: none !important;
}

#aboutCompany .slick-prev:before {
  font-size:15px;
	content: "\e609";
}
#aboutCompany .slick-next:before {
  font-size:15px;
	content: "\e622";
}

@media (max-height: 820px) {

	#aboutCompany .yearBox{
		  margin: -10px auto 10px auto;
	}

	#aboutCompany .InnerWrapper p.title{
		font-size: 21px;
		margin: 20px 0;
	}

	#aboutCompany .detailBox{
		margin: 25px auto !important;
	}

	#aboutCompany .slick-dots {
	  bottom: -60px;
	}

	#aboutCompany .slick-dots li{
		width: 12px;
		height: 12px;
	}

}

@media (max-width: 1450px) {
	
	#aboutCompany  .slick-prev {
	  left: -35px;
	}

	#aboutCompany  .slick-next {
		right: -30px;
	}

}

/* ==========================================================================
    news
 ========================================================================== */
#newsCountainer .mix {
  display: none;
}

.newsList {
  text-align:center;
  min-height: 500px;
}

.newsList .item {
  width: 30%;
  padding-bottom:1.5em;
  margin: 0 1.5% 3em 1.5%;
  display: inline-block;
  vertical-align: top;
}

.newsList .item .pic{
  position:relative;
  z-index: 1;
  width: 100%;
  height: 260px;
  overflow:hidden;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  -webkit-transform: scale(1);
      -ms-transform: scale(1);
          transform: scale(1);
  -webkit-transition: 1s ease-out;
          transition: 1s ease-out;
}

.newsList .item .pic:before {
  content: '';
  width: 100%;
  height: 100%;
  display: block;
  background: url(images/product/plus2.png) center no-repeat #2db587;
  background-color: rgba(225, 35, 35, .6);
  position: absolute;
  left: 0;
  top: 0;
  /*left: -5%;
  top: -5%;*/
  z-index: 10;
  opacity: 0;
  -webkit-transform: scale(1);
      -ms-transform: scale(1);
          transform: scale(1);
  -webkit-transition: transform .2s ease-in-out, opacity .5s;
          transition: transform .2s ease-in-out, opacity .5s;
}

.green .newsList .item .pic:before {
  background-color: rgba(20, 130, 50, .6);
}

.newsList .item .text {
  text-align:left;
}

.newsList .item .text .time {
  color: #999;
  font-size:15px;
  margin: 0 0 10px 0;
  display:block;
}

.newsList .item .text .title {
  font-size: 18px;
  color: #000;
  line-height: 1.4;
  margin: 20px 0 0 0;
  /*height:60px;*/
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.newsList .item .text .info {
  font-size: 15px;
  color: #666;
  line-height: 1.6;
  height:95px;
  overflow: hidden;
  margin-bottom:2em;
}

.newsList .item .text .more {
  font-size: 13px;
  color: #df201d;
  text-align:center;
  line-height: 45px;
  width: 135px;
  height: 45px;
  margin: auto;
  display: block;
  border: 1px solid #df201d;
  transition:all .3s;
}

.green .newsList .item .text .more {
  color: #009d42;
  border: 1px solid #009d42;
}

.newsList .item:hover .text .more {
  color: #FFF;
  background-color:#df201d;
}

.green .newsList .item:hover .text .more {
  background-color:#009d42;
}

.newsList .item:hover .pic:before {
  /*left: 0;
  top: 0;*/
  -webkit-transform: scale(1.4);
      -ms-transform: scale(1.4);
          transform: scale(1.4);
  opacity: 1;
}

.brandAn {
  -webkit-animation: 1s ease-in alternate none brandAn;
          animation: 1s ease-in alternate none brandAn;
}


@keyframes brandAn {
    0% {
 height: 190px;
  width: 190px;
    
    }
    50%{
 height: 230px;
  width: 230px;
    }
    100% {
 height: 190px;
  width: 190px;
    
    }
}
@-webkit-keyframes brandAn {
    0% {
 height: 190px;
  width: 190px;
    
    }
    50%{
 height: 230px;
  width: 230px;
    }
    100% {
 height: 190px;
  width: 190px;
    
    }
}

/*size*/
.max-md-size .newsList .item {
  margin: 0 1% 4.5em 1%;
  border: 1px solid #f2f2f2;
}

.max-md-size .newsList .item .pic{
  height: 200px;
}

.max-md-size .newsList .item .text {
  margin: 20px 10px 0 10px;
}

.max-sm-size .newsList .item {
  width: 100%;
  margin-left:0;
  margin-right:0;
}

/*.max-sm-size .newsList .item {
  width: 47%;
}
.max-xs-size .newsList .item {
  width: 100%;
  margin-left:0;
  margin-right:0;
}*/

.max-xs-size .newsList .item .text .info {
  display: none;
}
/* ==========================================================================
    new
 ========================================================================== */
#new .heading .title {
  font-size:30px;
  margin:0;
  line-height:1.3;
}

#new .heading .titleBot {
  width:100%;
  margin:20px 0 0 0;
  /*margin:20px 0;*/
}

#new .heading .time {
  color:#ccc;
  font-size:20px;
  float:left;
  display:block;
  margin-top:5px;
}

.max-md-size #new .heading .title {
  margin-top:20px;
}


/* ==========================================================================
    new [share]
 ========================================================================== */
#new .share {
  float: right;
  display: block;
  padding-left:5px;
  position:relative;
  /*border-left: 1px solid #CCC;*/
}

#new .share:before {
  content:"";
  width:1px;
  height:33px;
  display:block;
  background-color: #CCC;
  position:absolute;
  top:-3px;
  left:-15px;
}

#new .share > a {
  width:30px;
  margin: 0 5px;
  display: inline-block;
  text-decoration: none;
  transition: All 0.4s ease-in-out;
  -webkit-transition: All 0.4s ease-in-out;
  -moz-transition: All 0.4s ease-in-out;
  -o-transition: All 0.4s ease-in-out;
}

#new .share > a:hover {
  width:30px;
  margin: 0 5px;
  display: inline-block;
  text-decoration: none;
  transform:rotate(360deg) scale(1.2);
  -webkit-transform:rotate(360deg) scale(1.2);
     -moz-transform:rotate(360deg) scale(1.2);
       -o-transform:rotate(360deg) scale(1.2);
      -ms-transform:rotate(360deg) scale(1.2); 
}

#new .share > a > .inco img{
  max-width:100%;
}

#new .share > a:hover > .inco img{
  opacity:.5;
}

#new .html p {
  color:#666;
  font-size:15px;
  line-height:2;
}

/*size*/
.max-xs-size #new .heading .title {
  font-size:25px;
}

.max-xs-size #new .titleBot {
  padding:10px 0;
  margin: 10px 0 20px 0;
  border-bottom: 1px solid #ccc;
}

.max-xs-size #new .share:before {
  display:none;
}

.max-xs-size #new .share {
  text-align:right;
}

/* ==========================================================================
    product
 ========================================================================== */
/*.product .section {
  position: relative;
  height: 850px;
  max-height: 90vh;
}

.product .section .text {
  position: absolute;
  color: #545454;
  padding: 0 15px;
  width: 100%;
  max-width: 500px;
  top: 0;
  bottom: 0;
  margin: auto;
  z-index: 20;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: start;
  -webkit-align-items: flex-start;
      -ms-flex-align: start;
          align-items: flex-start;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  opacity: 0;
}

.product .section .text .slogan {
  font-size: 45px;
  font-style: italic;
  margin: 15px 0 5%;
  width: 100%;
}

.product .section .text .slogan + p {
  margin-bottom: 0;
}

.product .section .text .mainBtn {
  max-width: 140px;
  float: left;
  margin-top: 5%;
  margin-left: 0;
  padding: .8em 1em;
}

.product .section .clickDown {
  background: url(images/product/clickscroll.png) center no-repeat;
  width: 62px;
  height: 62px;
  display: block;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 7%;
  margin: auto;
  z-index: 10;
}

.product .section .background {
  width: 100%;
  height: 100%;
}

.product .section.white .text {
  color: #fff;
}

.product .section.right .text {
  right: 0;
}

.product .section.banner .background {
  width: 110%;
  left: -5% !important;
  right: -5% !important;
  top: -5px;
  height: 855px;
  overflow: hidden;
}

.product .section.banner .background img {
  opacity: 1;
}

.no-csstransforms3d .product .section .background img,
.no-csstransforms3d .product .section .text {
  opacity: 1;
}

.no-flexbox .product .section .text {
  display: block;
  top: 50%;
  bottom: auto;
  -webkit-transform: translateY(-50%);
      -ms-transform: translateY(-50%);
          transform: translateY(-50%);
}*/
/* ==========================================================================
    product [sliderTop]
 ==========================================================================*/

#product .sliderTop .text {
	width: -moz-calc(100% - 30px);
	width: -webkit-calc(100% - 30px);
	width: calc(100% - 30px);
	text-align:center;
}


/*文字動態*/
.goAction {
	opacity: 0;
	-webkit-transform: translate3d(0,-50px,0) scale(0.85);
          transform: translate3d(0,-50px,0) scale(0.85);
          transition: all 1s;
	-webkit-transition-delay: 0s;
					transition-delay: 0s;
	-webkit-transition-timing-function: ease-in-out;
					transition-timing-function: ease-in-out;
}

.slick-current .goAction {
	-webkit-transform: translate3d(0,0,0) scale(1);
					transform: translate3d(0,0,0) scale(1);
	opacity: 1;
}


/*輪播按鈕*/

.min-sm-size .sliderTop .slick-prev,
.min-sm-size .sliderTop .slick-next {
  color: rgba(0, 0, 0,1);
    font-size: 0;
    line-height: 0;
    position: absolute;
    top: inherit;
    bottom:-55px;
    z-index:99;
    display: block;
    width: 50px;
    height: 35px;
    margin: 0;
    padding: 0;
    border-radius: 0;
    cursor: pointer;
    border: none;
    outline: none;
    transition: background 0.5s, color 0.5s;
    /*background: rgba(230, 6, 23, 0.6);*/
    border: 2px solid;
    border: rgba(203, 203, 203 ,0);
    transition:color ease-in-out .4s;
}

.min-sm-size .sliderTop .slick-prev:hover,
.min-sm-size .sliderTop .slick-prev:focus,
.min-sm-size .sliderTop .slick-next:hover,
.min-sm-size .sliderTop .slick-next:focus {
  outline: none;
  color: rgba(230, 6, 23, 0.6);
  border: rgba(230, 6, 23, 0);
  /*background: rgba(230, 6, 23, 0.9);*/
}

.min-sm-size .green .sliderTop .slick-prev:hover,
.min-sm-size .green .sliderTop .slick-prev:focus,
.min-sm-size .green .sliderTop .slick-next:hover,
.min-sm-size .green .sliderTop .slick-next:focus {
  color: rgba(20,130,50, 0.6);
  border: rgba(20,130,50, 0);
}

.min-sm-size .sliderTop .slick-prev:hover:before,
.min-sm-size .sliderTop .slick-prev:focus:before,
.min-sm-size .sliderTop .slick-next:hover:before,
.min-sm-size .sliderTop .slick-next:focus:before {
    opacity: 1;
}

.min-sm-size .sliderTop .slick-prev.slick-disabled,
.min-sm-size .sliderTop .slick-next.slick-disabled {
    color: rgba(203, 203, 203);
    /*background: rgba(255, 255, 255, 0.6);*/
}

.min-sm-size .sliderTop .slick-prev.slick-disabled:before,
.min-sm-size .sliderTop .slick-next.slick-disabled:before {
    opacity: .25;
}

.min-sm-size .sliderTop .slick-prev:before,
.min-sm-size .sliderTop .slick-next:before {
    font-family: 'icomoon';
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    /* Better Font Rendering =========== */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-size: 35px;
}

.min-sm-size .sliderTop .slick-prev {
  left: 90px;
}

.min-sm-size .sliderTop .slick-prev:hover,
.min-sm-size .sliderTop .slick-prev:foucs {
  left: 90px;
}

.min-sm-size .sliderTop .slick-prev:before {
  content: "\e605";
  position:relative;
  left:-15px;
}
.min-sm-size .sliderTop .slick-prev:after {
  content: "";
  position:relative;
  top:-35px;
  left:50px;
  width:1px;
  height:35px;
  display:block;
  background-color:#d9d9d9;
}

.min-sm-size .sliderTop .slick-next {
  left: 155px;
}

.min-sm-size .sliderTop .slick-next:hover {
  left: 155px;
}

.min-sm-size .sliderTop .slick-next:before {
  content: "\e608";
}



/*輪播按鈕*/
.max-sm-size .sliderTop .slick-prev {
	top: 45%;
  left: 20px;
}

.max-sm-size .sliderTop .slick-prev:hover {
  left: 5px;
}

.max-sm-size .sliderTop .slick-next {
	top: 45%;
	right: 20px;
}

.max-sm-size .sliderTop .slick-next:hover {
	right: 5px;
}

.max-sm-size .sliderTop .slick-prev,
.max-sm-size .sliderTop .slick-next {
	width: 50px;
	height: 50px;
}

.max-sm-size .sliderTop .slick-prev,
.max-sm-size .sliderTop .slick-next {
  color: rgba(203, 203, 203);
  border-color: rgba(203, 203, 203);
}

.max-sm-size .sliderTop .slick-prev:hover,
.max-sm-size .sliderTop .slick-prev:focus,
.max-sm-size .sliderTop .slick-next:hover,
.max-sm-size .sliderTop .slick-next:focus {
  color: rgba(230, 6, 23, .6);
  border-color: rgba(230, 6, 23, .6);
}

.bannerPro .clickDown {
  background: url(images/product/clickscroll.png) center no-repeat;
  background-size:cover;
  width: 62px;
  height: 62px;
  display: block;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 7%;
  margin: auto;
}

.bounce2 {
  -webkit-animation: 1s ease-in alternate infinite bounce2;
     -moz-animation: 1s ease-in alternate infinite bounce2;
       -o-animation: 1s ease-in alternate infinite bounce2;
          animation: 1s ease-in alternate infinite bounce2;
}

@-webkit-keyframes bounce2 {
  0% {
    margin-top:0;
  }
  100% {
    margin-top:-10px;
  }
}

@-moz-keyframes bounce2 {
  0% {
    -webkit-transform: translate3d(0, 0, 0);
       -moz-transform: translate3d(0, 0, 0);
         -o-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
  }
  100% {
    -webkit-transform: translate3d(0, -10px, 0);
       -moz-transform: translate3d(0, -10px, 0);
         -o-transform: translate3d(0, -10px, 0);
            transform: translate3d(0, -10px, 0);
  }
}

@-o-keyframes bounce2 {
  0% {
    -webkit-transform: translate3d(0, 0, 0);
       -moz-transform: translate3d(0, 0, 0);
         -o-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
  }
  100% {
    -webkit-transform: translate3d(0, -10px, 0);
       -moz-transform: translate3d(0, -10px, 0);
         -o-transform: translate3d(0, -10px, 0);
            transform: translate3d(0, -10px, 0);
  }
}

@keyframes bounce2 {
  0% {
    -webkit-transform: translate3d(0, 0, 0);
       -moz-transform: translate3d(0, 0, 0);
         -o-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
  }
  100% {
    -webkit-transform: translate3d(0, -10px, 0);
       -moz-transform: translate3d(0, -10px, 0);
         -o-transform: translate3d(0, -10px, 0);
            transform: translate3d(0, -10px, 0);
  }
}

/*zoom*/
/*.loupe {
  background-color: #555;
  background: rgba(0, 0, 0, 0.25);
  border: 1px solid rgba(0, 0, 0, 0.25);
  cursor: url(blank.png), url(blank.cur), none;
  z-index: 100;
}*/

/* ==========================================================================
    產品列表放大
 ========================================================================== */
/*===== Projects Feed =====*/
.brick {
  float: left;
  width: 50%;
  margin: 0;
  opacity: 0;
  position: relative;
  -webkit-transition: opacity 300ms ease-in-out;
  transition: opacity 300ms ease-in-out;
  border-bottom: 1px solid #d2d2d2;
  border-right: 1px solid #d2d2d2;
  /*max-width: 600px;
  width: 100%;*/
}
.max-sm-size .brick {
  width: 100%;
  border-left: 1px solid #d2d2d2;
}

.brick--show {
  opacity: 1;
}

.brick > a {
  height:480px;
  overflow:hidden;
  margin: 0;
  display: block;
  position: relative;
}
.max-mds-size .brick > a {
  height:400px;
}
.max-sm-size .brick > a {
  height:300px;
}

.max-xs-size .brick > a {
  height:265px;
}

.brick::after {
  clear: both;
  content: '';
  display: block;
}

.brick > a:before {
  content:"";
  width:100%;
  height:100%;
  background-color:#FFF;
  position: absolute;
  opacity:1;

    -ms-transition: opacity 400ms ease-in-out, -ms-transform 400ms ease-in-out;
    -webkit-transition: opacity 400ms ease-in-out, -webkit-transform 400ms ease-in-out;
    transition: opacity 400ms ease-in-out, transform 400ms ease-in-out;
}

.brick > a:hover:before {
  opacity:0;
}

.projects-feed .project {
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
}

.projects-feed .project,
.projects-feed .project .thumb { overflow: hidden; }
.projects-feed .thumb {
  width:auto;
  height:560px;
  position: absolute;
  top: -16%;
  right:-9%;
}

.projects-feed .thumb img {
  width:auto;
  height:100%;
}

/*size*/
.max-bg-size .projects-feed .thumb {
  top: -10%;
}
.max-bg-size .projects-feed .thumb img {
  height:80%;
}

.projects-feed .thumb {
  -ms-transition: opacity 350ms ease-in-out, -ms-transform 400ms ease-in-out;
  -webkit-transition: opacity 350ms ease-in-out, -webkit-transform 400ms ease-in-out;
  transition: opacity 350ms ease-in-out, transform 400ms ease-in-out;
}

.no-touch .projects-feed a:hover .thumb {
  opacity: 0;
  -ms-transform: scale(1.2);
  -webkit-transform: scale(1.2);
  transform: scale(1.2);
}


.project .inner {
  position: absolute;
  top:25%;
  left:55px;
  z-index: 1;
  /*opacity:1;*/
}

.max-mds-size .project .inner {
  text-align:center;
  position: inherit;
  left:0
  ;
}
.max-mds-size .project .inner .tit{
  margin:20px 0;
}

/*.project:hover .inner {
  opacity:0;
}*/

.project .tit .cn{
  color: #b21916;
  font-size:27px;
  font-weight:bold;
  letter-spacing:.5px;
  display:block;
  margin-bottom:15px;
      -ms-transition: opacity 350ms ease-in-out, -ms-transform 400ms ease-in-out;
  -webkit-transition: opacity 350ms ease-in-out, -webkit-transform 400ms ease-in-out;
          transition: opacity 350ms ease-in-out, transform 400ms ease-in-out;
}

.green .project .tit .cn{
  color: #057712;
}

.project .tit .en{
  color: #666;
  font-size:17px;
  min-height:45px;
  letter-spacing:.1em;
  /*min-height:60px;*/
  display:block;
      -ms-transition: opacity 350ms ease-in-out, -ms-transform 400ms ease-in-out;
  -webkit-transition: opacity 350ms ease-in-out, -webkit-transform 400ms ease-in-out;
          transition: opacity 350ms ease-in-out, transform 400ms ease-in-out;
}

.project .tit .area{
  color: #999;
  font-size:16px;
  display:block;
  margin-top:10px;
      -ms-transition: opacity 350ms ease-in-out, -ms-transform 400ms ease-in-out;
  -webkit-transition: opacity 350ms ease-in-out, -webkit-transform 400ms ease-in-out;
          transition: opacity 350ms ease-in-out, transform 400ms ease-in-out;
}

.max-md-size .project .tit .cn{
  font-size:30px;
}

.max-md-size .project .tit .en{
  font-size:15px;
}

.max-sm-size .project .tit .en{
  display:none;
}

.max-md-size .project .tit .cn,
.max-md-size .project .tit .en,
.max-md-size .project .tit .area{
  color: #FFF;
}

.min-md-size .project:hover .tit .cn,
.min-md-size .project:hover .tit .en,
.min-md-size .project:hover .tit .area{
  color: #FFF;
      -ms-transform: scale(1.2);
  -webkit-transform: scale(1.2);
          transform: scale(1.2);
}

.project .more {
  color:#df201d;
  font-size:14px;
  text-align:center;
  line-height:43px;
  height:45px;
  width:140px;
  display:block;
  /*margin:auto;*/
  border: solid 1px #df201d;
}

.green .project .more {
  color:#009d42;
  border: solid 1px #009d42;
}

.min-lg-size .project .thumbnail-title-wrap .more {
  /*置中*/
  transform: translateX(-50%) translateY(-50%);
  -webkit-transform: translateX(-50%) translateY(-50%);
  display: inline-block;
  position: absolute;
  top: 50%;
  left: 50%;
  right: auto;
  bottom: auto;
  z-index: 1;
}

.min-lg-size .project:hover .inner .more {
  display:none;
}

.min-lg-size .project:hover .more {
  color:#FFF;
  background-color:#df201d;
}

.min-lg-size .green .project:hover .more {
  background-color:#009d42;
}

.max-lg-size .project .more {
  color:#FFF;
  background-color:#df201d;

  position: absolute;
  left:0;
  right:0;
  bottom:35px;
  margin:auto;
}

.max-lg-size .green .project .more {
  background-color:#009d42;
}

.max-lg-size .project .inner .more {
  display:none;
}

/*.max-md-size .project .center .more {
    position: inherit;
    display:block;
    margin:auto;
}*/



.thumbnail-title-wrap {
    background-image: radial-gradient(circle, rgba(0,0,0,0.4) 0%, rgba(0,0,0,0.65) 100%);
    height: 100%;
    opacity: 0;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    text-align: center;
    -ms-transition: opacity 400ms ease-in-out, -ms-transform 400ms ease-in-out;
    -webkit-transition: opacity 400ms ease-in-out, -webkit-transform 400ms ease-in-out;
    transition: opacity 400ms ease-in-out, transform 400ms ease-in-out;
    width: 100%;
}

.min-md-size .thumbnail-title-wrap {
    -ms-transform: scale(1.3);
    -webkit-transform: scale(1.3);
    transform: scale(1.3);
}

.max-md-size .thumbnail-title-wrap {
    opacity: 1;
    background-image: radial-gradient(circle, rgba(0,0,0,0.4) 0%, rgba(0,0,0,0.55) 100%);
}

.no-touch .projects-feed .project a:hover .thumbnail-title-wrap {
    opacity: 1;
    -ms-transform: scale(1);
    -webkit-transform: scale(1);
    transform: scale(1);
}

.max-md-size .no-touch .projects-feed .project a .thumbnail-title-wrap {
    opacity: 1;
    -ms-transform: scale(1);
    -webkit-transform: scale(1);
    transform: scale(1);
}

.thumbnail-title-wrap::before {
    content: '';
    display: inline-block;
    height: 100%;
    margin-right: -0.25em;
    vertical-align: middle;
}

.center {
  /*display: inline-block;
  margin: 0;
  max-width: 90%;
  vertical-align: middle;*/
  /*置中*/
  /*transform: translateX(-50%) translateY(-50%);
  -webkit-transform: translateX(-50%) translateY(-50%);
  display: inline-block;
  position: absolute;
  top: 50%;
  left: 50%;
  right: auto;
  bottom: auto;
  z-index: 1;*/
}

.title--thumbnail {
    color: #FFFFFF;
    display: inline-block;
    font-family: /*GF*/ Karla, sans-serif;
    font-size: 26px;
    margin-bottom: 10px;
    padding-right: 0;
}

.tags--thumbnail {
    color: #FFFFFF;
    font-family: /*GF*/ Karla, sans-serif;
    font-size: 15px;
}

.tags--thumbnail span + span { margin-left: 10px; }

/*===== Project Assets =====*/
.thumb img {
    height: auto;
    width: 100%;
}

div.image,
div.audio,
div.video {
    margin-top: 20px;
    margin-right: auto;
    margin-left: auto;
    max-width: 750px;
    text-align: center;
}

div.image img { width: 100%; }
.asset-description {
    color: #111111;
    font-family: /*GF*/ Karla, sans-serif;
    font-size: 17px;
    margin: 0 auto;
    max-width: 750px;
    padding: 30px 0 0;
    text-align: left;
}

.view {
    cursor: -webkit-zoom-in;
    cursor: -moz-zoom-in;
}

/*CSS3*/
/* Float Shadow */
.hvr-float-shadow {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -moz-osx-font-smoothing: grayscale;
  position: relative;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-property: transform;
  transition-property: transform;
}

.hvr-float-shadow:before {
  pointer-events: none;
  position: absolute;
  z-index: -1;
  content: '';
  top: 105%;
  left: 5%;
  height: 10px;
  width: 90%;
  opacity: 0;
  background: -webkit-radial-gradient(center, ellipse, rgba(0, 0, 0, 0.35) 0%, rgba(0, 0, 0, 0) 80%);
  background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.35) 0%, rgba(0, 0, 0, 0) 80%);
  /* W3C */
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-property: transform, opacity;
  transition-property: transform, opacity;
}

.hvr-float-shadow:hover, .hvr-float-shadow:focus, .hvr-float-shadow:active {
  -webkit-transform: translateY(-5px);
  transform: translateY(-5px);
  /* move the element up by 5px */
}

.hvr-float-shadow:hover:before, .hvr-float-shadow:focus:before, .hvr-float-shadow:active:before {
  opacity: 1;
  -webkit-transform: translateY(5px);
  transform: translateY(5px);
  /* move the element down by 5px (it will stay in place because it's attached to the element that also moves up 5px) */
}

/*== product 共用列表 =========================== */
.listStyle1 {
  margin: 0;
  padding: 0;
}

.listStyle1 li {
  width: 50%;
  float:left;
  /*margin:0 -2.px -6.5px -2.5px;*/
  overflow: hidden;
  display:block;
}

.listStyle1 li a {
  text-align: center;
  height: 47vh;
  /*height: 660px;*/
  display: block;
  position: relative; 
}

.listStyle1 li .pic {
  position: absolute;
  z-index: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  opacity: 1;
}

.listStyle1 li .pic img{
  background-size: cover;
}

.listStyle1 li .inner {
  color: #FFF;
  text-align: center;
  background-color: rgba(0,0,0,0.55);
  width: 100%;
  height:100%;
  position: absolute;
  top: 30px;
  left: 0;
  right: 0;
  bottom: 0;
  opacity:0;
  				transition: All 0.4s ease-in-out;
  -webkit-transition: All 0.4s ease-in-out;
     -moz-transition: All 0.4s ease-in-out;
       -o-transition: All 0.4s ease-in-out;
      -ms-transition: All 0.4s ease-in-out;
}

.listStyle1 li:hover .inner,
.listStyle1 li.soonActived .inner {
  top: 0;
  opacity:1;
}

.listStyle1 li .text{
  width: 52%;
  min-height: 270px;
  transform: translateX(-50%) translateY(-50%);
  -webkit-transform: translateX(-50%) translateY(-50%);
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  right: auto;
  bottom: auto;
  z-index: 1;
  box-sizing: border-box;
  border-width: 3px;
  border-style: solid;
  border-color: rgba(255, 255, 255 , 1);
}

.listStyle1 li .text:before {
  content: '';
  height: 100%;
  display: inline-block;
  vertical-align: middle;
}

.listStyle1 li .text .subject {
  width:100%;
  max-height: 90%;
  overflow: hidden;
  margin:0;
  /* padding:5% 0;
  margin: 4% 0 0 0;
  vertical-align: middle;*/
  position:absolute;
  left: 50%;
  top: 50%;
  bottom: auto;
  right: auto;
  transform: translateX(-50%) translateY(-50%);
  text-align: center;
  display:inline-block;
}

.listStyle1 li .text .subject span {
  display:block;
  line-height:1.2;
}

.listStyle1 li .text .subject .cn {
  font-size:40px;
  /*font-size:45px;*/
  font-weight:bold;
  margin-bottom:10px;
}

.listStyle1 li .text .subject .en {
  font-size: 30px;
  /*font-size: 35px;*/
  text-transform: uppercase;
}

.listStyle1 li .text .subject .soon {
  font-size: 40px;
  /*font-size: 45px;*/
  text-transform: uppercase;
  line-height:1.5 !important;
}

.listStyle1 li .text .subject .soon {
  display:none;
}

/*coming soon 選取*/
.listStyle1 li.soonActived .inner {
   color: rgba(255, 255, 255 , .2) ;
}

.listStyle1 li.soonActived .text{
  border-color: rgba(255, 255, 255 , .2) ;
}

.listStyle1 li.soonActived .text .subject .soon {
  display: block;
}

.listStyle1 li.soonActived a:before {
  content:"";
  background-color: rgba(22,22,22,0.7);
  width: 100%;
  height:100%;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index:1;
}

.soonActived .text {
  z-index:0;
}

.soonActived a {
  cursor:default;
}

.soonActived .text .subject .cn,
.soonActived .text .subject .en {
  display:none;
}

.soonActived .text .subject .soon {
  display:block;
}

/*size*/
/*.max-bg-size .listStyle1 li a {
  height: 550px; 
}*/

.max-bg-size .listStyle1 li .text{
  width: 75%;
}

/*.max-lg-size .listStyle1 li a {
  height: 450px; 
}*/

.max-lg-size .listStyle1 li .text{
  width: 85%;
}


.max-md-size .listStyle1 li .inner {
  /*background-color: rgba(235,0,0, .3);*/
  background-color: rgba(0,0,0, .35);
  top: 0;
  opacity:1;
}

.max-md-size .listStyle1 li .inner:after {
  opacity:.6;
}

/*.max-md-size .listStyle1 li a {
  height: 330px;
}*/

.max-md-size .listStyle1 li .text{
  border: 1px solid #FFF;
}

.max-md-size .listStyle1 li .text .subject {
  font-weight:bold;
  height: auto;
  text-shadow: 0px 1px 3px rgba(0,0,0,0.65);
}

.max-md-size .listStyle1 li .text .subject {
  padding:0;
  margin: 0;
  
  transform: translateX(-50%) translateY(-50%);
  -webkit-transform: translateX(-50%) translateY(-50%);
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  right: auto;
  bottom: auto;
  z-index: 1;
}
.max-md-size .listStyle1 li .text .subject .cn {
  font-size: 30px;
}
.max-md-size .listStyle1 li .text .subject .en {
  font-size: 15px;
  font-weight: normal;
}
.max-md-size .listStyle1 li .text .subject .soon {
  font-size: 30px;
  font-weight: normal;
}


.max-sm-size .listStyle1 li .text {
  min-height: 85%;
}
.max-sm-size .listStyle1 li .text .subject .cn {
  font-size: 35px;
}
.max-sm-size .listStyle1 li .text .subject .en {
  font-size: 20px;
}
.max-sm-size .listStyle1 li .text .subject .soon {
  font-size: 25px;
}

.max-xs-size .listStyle1 li {
  width: 100%;
}

.max-xs-size .listStyle1 li a {
  height: 280px;
}

/* ==========================================================================
    productsList 產品列表
 ========================================================================== */
#productsList .projects-feed {
  border-top: 1px solid #d2d2d2;
}

.project.soonActived {
  background-color:#fafafa;
}

.project.soonActived .inner {
  position: relative;
  transform: translateX(-50%) translateY(-50%);
  -webkit-transform: translateX(-50%) translateY(-50%);
  top: 50%;
  left: 50%;
  right: auto;
  bottom: auto;
  z-index: 1;
  box-sizing: border-box;
}

.project.soonActived .text {
  width: 52%;
  min-height: 270px;
  margin:auto;
  border: 3px solid #e6e6e6;
}

.project.soonActived .text:before {
  content: '';
  height: 100%;
  display: inline-block;
  vertical-align: middle;
}

.project.soonActived .text .subject {
  width: 100%;
  padding: 5% 0;
  margin: 4% 0 0 0;
  position: relative;
  display: inline-block;
  vertical-align: middle;
  box-sizing: border-box;
  text-align: center;
  max-height: 90%;
  overflow: hidden;
}

.project.soonActived .text .subject .soon{
  color:#e6e6e6;
}

/* ==========================================================================
    product 產品內頁
 ==========================================================================*/
#product .proCont {
  text-align:center;
  position:relative;
  height:630px;
  overflow:hidden;
}

#product .proCont:before {
  content: "";
  background-image: url(images/product/product_inside-bg.png);
  background-repeat: no-repeat;
  height: 390px;
  width: 779px;
  display:block;
  position:absolute;
  top:0;
  left:0;
  right:0;
  margin:auto;
}

#product .proCont .inner {
  width: 100%;
  height:100%;
  background-size: cover;
  background-repeat:repeat;
  background-position: center;
}

#product .proCont .hdSlider {
  padding:20px 0 0 0;
}

#product .proCont .hdSlider .cn {
  font-size:35px;
  font-weight:bold;
  display:block;
}

#product .proCont .hdSlider .en {
  font-size:19px;
  display:block;
  padding:17px 0;
}

.max-sm-size #product .proCont {
  height:580px;
}

.max-sm-size #product .proCont .hdSlider .cn {
  font-size:33px;
}

.max-sm-size #product .proCont .hdSlider .en {
    font-size: 17px;
    padding: 12px 0;
}

.max-xs-size #product .proCont {
  height:500px;
}



/*== product slider =========================== */
#product .sliderPro {
  width:80%;
  margin:0 auto;
}

#product .sliderPro .list .pic {
  position:relative;
  width:400px;
  height:400px;
  margin:auto;
  /**/
  -webkit-transition: -webkit-transform 1.5s cubic-bezier(.23, 1, .32, 1), -webkit-filter 1.5s cubic-bezier(.23, 1, .32, 1), filter 1.5s cubic-bezier(.23, 1, .32, 1);
     -moz-transition:    -moz-transform 1.5s cubic-bezier(.23, 1, .32, 1), -webkit-filter 1.5s cubic-bezier(.23, 1, .32, 1), filter 1.5s cubic-bezier(.23, 1, .32, 1);
          transition:         transform 1.5s cubic-bezier(.23, 1, .32, 1), -webkit-filter 1.5s cubic-bezier(.23, 1, .32, 1), filter 1.5s cubic-bezier(.23, 1, .32, 1);

/*放大*/
  -webkit-transform: scale(.6);
     -moz-transform: scale(.6);
      -ms-transform: scale(.6);
          transform: scale(.6);
}

#product .sliderPro .list.slick-center .pic {
  /*放大*/
  -webkit-transform: scale(1);
     -moz-transform: scale(1);
      -ms-transform: scale(1);
          transform: scale(1);

  -webkit-filter: saturate(1.3);
}

#product .sliderPro .list .pic img {
  max-width:100%;
}

#product .sliderPro .list .view {
  color: transparent;
  font-size: 18px;
  width:100px;
  height:45px;
  line-height:45px;
   /*放大*/
  -webkit-transform: scale(1.6);
     -moz-transform: scale(1.6);
      -ms-transform: scale(1.6);
          transform: scale(1.6);
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin:auto;
  z-index: 1;
  border: 1px solid transparent;
  
  transition:all ease-in .3s;
}

#product .sliderPro .list:hover .view {
  color: #FFF;
  border: 1px solid #FFF;
}

#product .sliderPro .list.slick-center:hover .view,
#product .sliderPro .list.slick-center .pic:before {
  display:none;
}

#product .sliderPro .list .pic:before {
  content:"";
  width:100%;
  height:100%;
  display:block;
  border-radius:100%;
  background-color: rgba(225, 35, 35, 0);
  
  /*置中*/
  transform: translateX(-50%) translateY(-50%);
  -webkit-transform: translateX(-50%) translateY(-50%);
  display: inline-block;
  position: absolute;
  top: 50%;
  left: 50%;
  right: auto;
  bottom: auto;
  z-index:0;
  
  transition:all ease-in .3s;
}

.green #product .sliderPro .list .pic:before {
  background-color: rgba(20, 130 ,50, 0);
}

#product .sliderPro .list:hover .pic:before {
  background-color: rgba(225, 35, 35, .7);
}

.green #product .sliderPro .list:hover .pic:before {
  background-color: rgba(20,130,50, .7);
}

/**/
.max-bg-size #product .sliderPro .list .pic {
  width:350px;
}

.max-mds-size #product .sliderPro .list .pic {
  opacity:.3;
}

.max-mds-size #product .sliderPro .list.slick-center .pic {
  opacity:1;
}

.max-md-size #product .sliderPro .list .pic {
  width:390px;
}

.max-md-size #product .sliderPro .list.slick-center .pic {
  position:relative;
  z-index:10;
}

.max-sm-size #product .sliderPro .list .pic {
  width:350px;
}

.max-xs-size #product .sliderPro .list .pic {
  width:250px;
}


/*== product 頁籤 =========================== */
#product .abgne_tab {
  margin-top:-39px;
  text-align:center;
}

#product ul.tabs {
  width: 100%;
  height: 40px;
  border-bottom: 1px solid #df201d;
}

.green #product ul.tabs {
  border-bottom: 1px solid #009d42;
}

#product ul.tabs li {
  display:inline-block;
  height: 40px;
  line-height: 40px;
  overflow: hidden;
  position: relative;
  margin-bottom: -1px;
  border-left: none;
}

#product ul.tabs li a {
  display: block;
  padding: 0 20px;
  color: #df201d;
  font-size:18px;
  text-decoration: none;
}

.green #product ul.tabs li a {
  color: #009d42;
}

/*#product ul.tabs li a:hover {
  background: #ccc;
}*/

#product ul.tabs li.active {
  font-weight:bold;
  background: #fff;
  border-top: 1px solid #df201d;
  border-left: 1px solid #df201d;
  border-right: 1px solid #df201d;
  border-bottom: 1px solid #fff;
}

.green #product ul.tabs li.active {
  border-top: 1px solid #009d42;
  border-left: 1px solid #009d42;
  border-right: 1px solid #009d42;
}

#product ul.tabs li.active a:hover {
  background: #fff;
}

/*size*/
.max-md-size #product .abgne_tab {
  margin-top:0;
}

.max-md-size #product ul.tabs { 
  height: auto;
  margin:20px 0;
  padding:0 15px;
  border-bottom: 1px solid transparent;
}

.max-md-size #product ul.tabs li {
  color: #FFF;
  width: 32.33%;
  float:left;
  display:block;
  height: 50px;
  line-height: 50px;
  margin: .5%;
  border: 1px solid #df201d;
}

.max-md-size .green #product ul.tabs li {
  border: 1px solid #009d42;
}

.max-md-size #product ul.tabs li a {
  display: block;
  padding: 0 20px;
  color: #df201d;
  font-size:18px;
  text-decoration: none;
}

.max-md-size .green #product ul.tabs li a {
  color: #009d42;
}

.max-md-size #product ul.tabs li.active a,
.max-md-size #product ul.tabs li.active a:hover,
.max-md-size #product ul.tabs li.active a:focus{
  color:#FFF;
  background-color: rgba(215, 12, 25, .9);
  border: 1px solid #df201d;
}

.max-md-size .green #product ul.tabs li.active a,
.max-md-size .green #product ul.tabs li.active a:hover,
.max-md-size .green #product ul.tabs li.active a:focus{
  background-color: rgba(8, 150, 65, .9);
  border: 1px solid #009d42;
}

.max-sm-size #product ul.tabs li {
  width: 48%;
  margin: 1%;
}

/*.max-xs-size #product ul.tabs li {
  width: 100%;
  margin: 2% 0;
}*/


/*內容*/
#product div.tab_container {
  width: 100%;
  max-width:1100px;
  margin:40px auto;
  text-align:left;
}

#product div.tab_container .tab_content {
  padding: 20px;
}

#product div.tab_container .tab_content h2 {
  margin: 0 0 20px;
}

.max-lg-size #product div.tab_container {
  margin:30px auto 40px auto;
}

.max-md-size #product div.tab_container {
  margin:20px auto 30px auto;
}

/*== product 頁籤內容 =========================== */
.proTab .heading {
  text-align:center;
  margin:20px 0 50px 0;
}

.proTab .heading > .title {
  font-size:30px;
  display:block;
}

.proTab .heading > .title-s {
  font-size:18px;
  display:block;
  margin: 20px 0;
}

.proTab .info {
  color:#333;
  font-size:19px;
}

.proTab .info img {
  max-width:100%;
}

.proTab .info .list {
  margin: .5em 0;
  padding-left:55px;
  position:relative;
}

.proTab .info .list .number {
  color:#707070;
  width:32px;
  height:32px;
  line-height:32px;
  text-align:center;
  display: inline-block;
  border-radius:100%;
  border: 1px solid #c0c0c0;
  position:absolute;
  top:2px;
  left:0;
}

.proTab .info .list:hover .number {
  color:#FFF;
  background-color:#df201d;
  border: 1px solid #df201d;
}

.green .proTab .info .list:hover .number {
  background-color:#009d42;
  border: 1px solid #009d42;
}

.proTab .info .list p {
  display: inline-block;
  line-height: 2;
}



.max-lg-size .proTab .heading {
  margin:0 0 35px 0;
}

.max-md-size .proTab .heading {
  margin:0 0 40px 0;
}

.max-md-size .proTab .heading > .title {
  font-size:28px;
}

.max-md-size .proTab .heading > .title-s {
  font-size:17px;
  margin: 20px 0;
}

.max-md-size .proTab .info {
  font-size: 16px;
}

.max-md-size .proTab .info .list p {
  line-height: 30px;
}

.max-sm-size .proTab .heading > .title {
  font-size:25px;
}

.max-sm-size .proTab .info .list {
  margin: .4em 0;
  padding-left:45px;
}

/*== tablePro 表格 =========================== */
.tablePro {
  color:#666;
  border-bottom: solid 1px #e0e0e0;
}

.tablePro tr:nth-child(odd) {
  background-color:#f7f7f7;
}

.tablePro th {
  font-size:20px;
  text-align:center;
  padding:18px 0;
  border-bottom: 2px solid #f2cdcd;
  background-color:#fff3f3;
}

.green .tablePro th {
  background-color: #eaf7d4;
  border-bottom: 2px solid #7DCE98;
}

.tablePro.tableGreen th {
  color:#000;
  border-bottom: 2px solid #009d42;
  background-color:#eaf7d4;
}

#knowProduct .tablePro td {
  padding: 15px 30px;
  position: relative;
}

#knowProduct .tablePro td i.incoBg {
  color: #FFF;
  font-size:15px;
  font-style: normal;
  text-align:center;
  line-height:35px;
  height: 35px;
  width: 91px;
  padding-left:10px;
  display: block;
  position: absolute;
  top:10px;
  right: -20px;
  background-image: url(images/knowledge/knowledge-2-inco-bg.png);
  background-repeat: no-repeat;
}

.max-md-size .tablePro th {
  font-size:19px;
  padding:16px 0;
}

.max-md-size .tablePro td {
  font-size:16px;
}

.max-sm-size #knowProduct .tablePro td i.incoBg {
  display:none;
}

#knowProduct .tablePro td.textLeft {
  text-align:left;
  padding: 15px 30px;
}

.max-sm-size #knowProduct .tablePro td {
  padding: 15px 20px;
}

.max-sm-size #knowProduct .tablePro td.textLeft {
  text-align:left;
  padding: 15px 20px;
}

.tablePro td {
  font-size:18px;
  text-align:center;
  padding:15px 0;
  border-left: solid 1px #e0e0e0;
}

.tablePro td:last-child {
  border-right: solid 1px #e0e0e0;
}

/*== tableAir 表格 =========================== */
.tableAir {
  color:#666;
  background-color:#FFF;
}

.tableAir tr:nth-child(2) td{
  color:#666;
  font-weight:bold;
  background-color:#f7f7f7;
}

.tableAir th {
  color:#000;
  font-size:20px;
  text-align:center;
  padding:18px 0;
  border-bottom: 2px solid #f2cdcd;
  background-color:#fff3f3;
}

.green .tableAir th {
  border-bottom: 2px solid #7DCE98;
  background-color:#eaf7d4;
}

.tableAir td {
  font-size:18px;
  text-align:center;
  padding:15px 0;
  border-left: solid 1px #e0e0e0;
  border-bottom: solid 1px #e0e0e0;
}

.tableAir td:last-child {
  border-right: solid 1px #e0e0e0;
}

/*== 場所列表共用  =========================== */
/*.usedList {
  text-align:center;
}*/
.usedList {
  background-color: #F0F0F0;
}

#product .usedList {
  background-color: transparent;
}

.usedList li {
  width: 20%;
  float:left;
  margin:0;
  /*margin:-3.5px -2.5px;*/
  overflow: hidden;
  display:block;
}

.usedList li .usedBox {
  text-align: center;
  height: 290px;
  display: block;
  position: relative;
  cursor:default;
}

.usedList li .pic {
  position: absolute;
  z-index: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  opacity: 1;
}

.usedList li .pic img{
  background-size: cover;
}

.usedList li .inner {
  color: #FFF;
  text-align: center;
  background-color: rgba(235,0,0,0.8);
  width: 100%;
  height:100%;
  position: absolute;
  top: 30px;
  left: 0;
  right: 0;
  bottom: 0;
  opacity:0;
  				transition: All 0.4s ease-in-out;
  -webkit-transition: All 0.4s ease-in-out;
     -moz-transition: All 0.4s ease-in-out;
       -o-transition: All 0.4s ease-in-out;
      -ms-transition: All 0.4s ease-in-out;
}

.green .usedList li .inner {
  background-color: rgba(20,130,50,0.8);
}

.usedList li:hover .inner {
  top: 0;
  opacity:1;
}

.usedList li .inner:after {
  content:"";
  width: 88%;
  height:90%;
  margin:auto;
  display:block;
  border: 1px solid #FFF;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 2;
}

.usedList li .text {
  width:75%;
  
  transform: translateX(-50%) translateY(-50%);
  -webkit-transform: translateX(-50%) translateY(-50%);
  display: inline-block;
  position: absolute;
  top: 50%;
  left: 50%;
  right: auto;
  bottom: auto;
  z-index: 1;
}

.usedList li .text .subject {
  font-size:30px;
  line-height:1.2;
  height:60px;
  overflow:hidden;
  padding:10px 0 0 0;
}

#aboutCompany .usedList li .text .subject {
  font-size:37px;
}

.usedList li .text .info {
  font-size:15px;
  color:#FFF;
  line-height:1.9;
  max-height:170px;
  overflow:hidden;
}

/*size*/
.max-bg-size .usedList li {
  width: 33.33%;
}

.max-md-size .usedList {
  padding: 3% 0;
}

.max-md-size .usedList li {
  width: 50%;
}

.max-md-size .usedList li .inner {
  /*background-color: rgba(0,0,0,0.3);*/
  /*background-color: rgba(225, 35, 35, .3);*/
  /*background-color: rgba(235,0,0, .3);*/
  background-color: rgba(0,0,0, .35);
  top: 0;
  opacity:1;
}

.max-md-size .usedList li .inner:after {
  opacity:.6;
}

.max-md-size .usedList li .usedBox {
  height: 330px;
}

.max-md-size .usedList li .text .subject {
  font-weight:bold;
  height: auto;
  text-shadow: 0px 1px 3px rgba(0,0,0,0.65);
}

.max-md-size .usedList li .text .info {
  display:none;
}

.max-sm-size .usedList li .usedBox {
  height: 280px;
}
.max-sm-size .usedList li .text .subject {
  font-size:28px !important;
}
.max-sm-size #aboutCompany .usedList li .text .subject {
  font-size:28px !important;
}

.max-xs-size .usedList {
  padding: 6% 0;
}

.max-xs-size .usedList li {
  width: 100%;
}

.max-xs-size .usedList li .usedBox {
  height: 280px;
}

/*== 下載列表共用  =========================== */
.downloadList {
  margin:auto;
  text-align:center;
}

.downloadList li {
  width: 245px;
  /*width: 30%;*/
  margin: 0 -5px 20px -5px;
  overflow: hidden;
  display: inline-block;
  vertical-align: top;
}

.downloadList li .in {
  text-align: center;
  height: 245px;
  /*margin: 0 15% !important;*/
  margin:0 15px;
  display: block;
  position: relative;
  cursor: default;
  border: solid 1px #c4c4c4;
}

.downloadList li .pic {
  position: absolute;
  top:0;
  right:0;
  bottom:0;
  left:0;
  margin: auto;
  z-index: 0;
  width: 87%;
  height: 87%;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  opacity: 1;
}

.downloadList li .inner {
  color: #FFF;
  text-align: center;
  background-color: rgba(225, 35, 35, 0.8);
  width: 100%;
  height:100%;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  opacity:0;
  				transition: All 0.4s ease-in-out;
  -webkit-transition: All 0.4s ease-in-out;
     -moz-transition: All 0.4s ease-in-out;
       -o-transition: All 0.4s ease-in-out;
      -ms-transition: All 0.4s ease-in-out;
}

.green .downloadList li .inner {
  background-color: rgba(20, 130, 50, 0.8);
}

.downloadList li:hover .inner {
  top: 0;
  opacity:1;
}

.downloadList li .inner:after {
  content:"";
  width: 105px;
  height:75px;
  margin:auto;
  display:block;
  border: 1px solid #FFF;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 2;
}

.downloadList li .text {
  width:75%;
  
  transform: translateX(-50%) translateY(-50%);
  -webkit-transform: translateX(-50%) translateY(-50%);
  display: inline-block;
  position: absolute;
  top: 50%;
  left: 50%;
  right: auto;
  bottom: auto;
  z-index: 1;
}

.downloadList li .text .subject {
  font-size:18px;
  line-height:1.2;
  overflow:hidden;
}

.downloadList li .name {
  font-size:16px;
  color:#4c4c4c;
  line-height:1.4;
  margin-top:15px;
}

/*size*/
.max-md-size .downloadList {
  padding: 3% 0;
}

.max-md-size .downloadList li .inner {
  /*background-color: rgba(0,0,0,0.3);*/
  background-color: rgba(225, 35, 35, .3);
  top: 0;
  opacity:1;
}

.max-md-size .green .downloadList li .inner {
  background-color: rgba(20, 130, 50, .3);
}

.max-md-size .downloadList li .inner:after {
  opacity:.6;
  border: 2px solid #FFF;
  width: 70%;
  height:50%;
}

.max-md-size .downloadList li .text .subject {
  line-height: 1.2;
  letter-spacing:.5px;
  overflow: hidden;
  font-weight: normal;
}

/*.max-sm-size .downloadList li .text .subject {
  font-size:23px;
}*/

.max-xs-size .downloadList {
  padding: 6% 0;
}

/*.max-xs-size .downloadList li {
  width: 100%;
}*/


/*== product 內容左右列表 =========================== */
.feature {
}

.feature .list {
  margin:30px 0;
}

.feature .list .pic {
  width:35%;
  float:left;
}

.feature .list .text {
  width:55%;
  float:right;
}

.feature .list:nth-child(even) .pic {
  float:right;
  width:60%;
}

.feature .list:nth-child(even) .text {
  float:left;
  width:35%;
}

.feature .list .pic img{
  width:100%;
}

.feature .list .text p {
  color:#666;
  font-size:18px;
  line-height:2;
}

.feature .list .text .heading-feature {
  font-size:30px;
  padding:18px 0;
}

/**/
.max-md-size .feature .list .text .heading-feature {
  font-size:25px;
  line-height:1.3;
  padding:5px 0;
}

.max-md-size .feature .list .text p {
  font-size:16px;
  line-height:35px;
}

.max-sm-size .feature .list .pic {
  width:100%;
  float:none;
}

.max-sm-size .feature .list .text {
  width:100%;
  float:none;
}

.max-sm-size .feature .list:nth-child(even) .pic {
  float:none;
  width:100%;
}

.max-sm-size .feature .list:nth-child(even) .text {
  float:none;
  width:100%;
}

.max-sm-size .feature .list .text p {
  font-size: 16px;
  line-height: 30px;
}

/*== product 我要詢問 =========================== */
.proQuery {
  
  position:relative;
}

.proQuery .heading {
  text-align:center;
  margin:60px 0 100px 0;
}

.proQuery .heading > .title {
  font-size:30px;
  display:block;
}

.proQuery .heading > .title-s {
  font-size:18px;
  display:block;
  margin: 20px 0;
}

.proQuery .background {
  position:relative;
  z-index: 0;
  width: 100%;
  height: 100%;
  min-height:650px;/*0710修改*/
  /*min-height:530px;*/
  /*min-height:480px;*/
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  opacity: 1;
}

.proQuery .background img{
  background-size: cover;
}

.max-md-size .proQuery .heading {
  margin:40px 0 70px 0;
}

.max-md-size .proQuery .heading > .title {
  font-size:23px;
  /*font-size:26px;*/
}

.max-md-size .proQuery .heading > .title-s {
  font-size: 14px;
  /*font-size:16px;*/
  margin: 15px 0;
}

.max-md-size .proQuery .background {
  min-height:500px;
}

.max-sm-size .proQuery .background {
  min-height:750px;
}

.max-xs-size .proQuery .background {
  min-height:950px;
}

/*== product 我要詢問 表單 =========================== */

form.product {
  /*width:1300px;
  margin:0 auto;*/
  position:absolute;
  left:0;
  right:0;
  top:110px;
  z-index:1;
  
  text-align: center;
}

.max-sm-size form.product {
  width: 100%;
}

.max-md-size form.product {
  top:90px;
}

form.product .form-panl {
  background-color:#ededed;
}

.form-panl {
  padding:5em 6em;
  /*padding:50px 100px;*/
}
@media (max-width: 1280px) {/*0707新增*/
  .form-panl {
    padding:5em 3em;
  }
}

/**/
.form-panl .left {
  float: left;
  width: 35%;
}

.form-panl .right {
  float: right;
  width: 60%;
}

.form-panl .sr-only {
    display: none;
}

:root .form-panl .sr-only {
    display: block\9;
    position: absolute\9;
    color: #FFF\9;
    top: 20px\9;
    left: 45px\9;
}

.form-panl .form-group {
  position: relative;
  margin: 10px 0 5px 0;
	border-bottom: 1px solid #cdcdcd;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: start;
     -ms-flex-align: start;
        align-items: flex-start;
}

.form-panl .form-group label:not(.form-check-label) {
  width: 6em !important;
  position: relative;/*0713修改*/
  /*position:absolute;*/
  top:-2px;
  bottom:0;
  color: #000;
  font-size: 16px;
  padding: 6px 12px;
  -ms-flex-negative: 0;
  flex-shrink: 0
}

.form-panl .form-control {
  font-size:16px;
  display: block;
  /*width: 100%;*/
  height: 34px;
  padding: 6px 12px;
  font-size: 14px;
  border-radius: 4px;
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0);
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0);
  -webkit-transition: border-color ease-in-out .15s, -webkit-box-shadow ease-in-out .15s;
  -o-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
  transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
  
  background-color:#FFF;
}

.form-panl .form-group .form-control:focus {
  outline: none;
  /*border-bottom: 1px solid #d7b685;*/
}

.form-panl .form-group input:not([type="radio"]):not([type="checkbox"]),
.form-panl .form-group select,
.form-panl .form-group textarea {
  color: #000;
  font-size: 16px;
  /*width: 100%;*/
  width: calc(100% - 6em);
  margin-bottom: 13px;
  height: 43px;/*0710修改*/
  /*height: 40px;*/
  /* height: 45px; */
  padding: 10px;
  box-sizing: border-box;
	border: 1px solid #E0E0E0;
  background: white;
}

.form-panl .form-group .select2.select2-container.select2-container--default {
  width: calc(100% - 6em) !important;
}
@media (min-width: 992px) {
  .form-panl .form-group .select2.select2-container.select2-container--default {
    margin-left: -7px;
    margin-right: 7px;
  }
}

.form-panl .form-group .form-checks {
  display: block;
  max-width: calc(100% - 6em);
  margin-bottom: 13px;
}

.form-panl .form-group .form-checks .form-check + .form-check {
  margin-left: 0;
}

/* .max-bg-size .form-panl .form-group input:not([type="radio"]):not([type="checkbox"]),
.max-bg-size .form-panl .form-group select,
.max-bg-size .form-panl .form-group textarea {
  width: 72%;
}

.max-xs-size .form-panl .form-group input:not([type="radio"]):not([type="checkbox"]),
.max-xs-size .form-panl .form-group select,
.max-xs-size .form-panl .form-group textarea {
    height: 35px;
} */

/*.max-xs-size .form-panl .form-group input:not([type="radio"]):not([type="checkbox"]),
.max-xs-size .form-panl .form-group select,
.max-xs-size .form-panl .form-group textarea {
  width: 52%;
}*/

.form-panl .form-group textarea {
    height: 246px;
}

.form-panl .code {
  position:absolute;
  top:3px;
  right:0;
}

/* placeholder*/
.form-panl .form-group .form-control::-webkit-input-placeholder {
    color: #000;
}

.form-panl .form-group .form-control::-moz-placeholder {
    color: #000;
}

/* firefox 19+ */
.form-panl .form-group .form-control:-ms-input-placeholder {
    color: #000;
}

/* ie */
.form-panl .form-group .form-control input:-moz-placeholder {
    color: #000;
}

.max-lg-size .form-panl {
  padding:3em 3em;
  /*padding:50px 100px;*/
}

.max-md-size .form-panl {
  padding:3em 2em;
}

.max-sm-size .form-panl .left {
  float: none;
  width: 100%;
}

.max-sm-size .form-panl .right {
  float: none;
  width: 100%;
}

.max-sm-size .form-panl .form-group textarea {
    height: 100px;
}

.max-xs-size .form-panl {
  padding:1.5em 2em;
}

.max-xs-size .form-panl .code {
    top: -6px;
}

.max-xs-size .form-panl .form-group {
  padding: 3px 0;
}

.max-xs-size .form-panl .form-group label:not(.form-check-label) {
  width: auto;
  height: auto;
  position: relative;
  top:0;
  padding: 2px 10px 2px 0;
}

.max-xs-size .form-panl .form-group input:not([type="radio"]):not([type="checkbox"]),
.max-xs-size .form-panl .form-group select,
.max-xs-size .form-panl .form-group textarea {
  width: 100%;
}



/*== 頁碼 products =========================== */
.proPage {
  text-align:center;
  /*width:1100px;
  margin:auto;*/
  padding: 60px 0;
}

.proPage a,
.proPage a h3 {
  color:#000;
  font-size:16px;
  padding:5px 0;
  margin:0;
  display:inline-block;
}

.proPage a {
  width:38%;
}

.proPage h3 {
  width:38%;
  line-height:1.4;
  text-align:left;
}

.proPage a:hover,
.proPage a:hover h3 {
  color:#df201d;
}

.green .proPage a:hover,
.green .proPage a:hover h3 {
  color:#009d42;
}

.proPage a:nth-child(1):after{
  color:#000;
  font-size:25px;
  font-weight:bold;
  content:"\e605";
  font-family: 'icomoon';
	speak: none;
	font-style: normal;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	line-height: 1;

	/* Better Font Rendering =========== */
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
  position: relative;
  top:5px;
  right:-10px;
  transition:all ease-in-out .4s;
}

.proPage a:nth-child(2){
  width:20%;
  border-left: 1px solid #d9d9d9;
  border-right: 1px solid #d9d9d9;
}

.max-sm-size .proPage a {
    padding:0;
}

.max-sm-size .proPage a h3 {
    padding:5px 0 0 0;
}


.max-sm-size .proPage a:nth-child(1) {
	border-right: 1px solid #d9d9d9;
}

.max-sm-size .proPage a:nth-child(1):after {
    top: 3px;
}

.max-sm-size .proPage a:nth-child(3):after{
  color:#000;
  font-size:25px;
  font-weight:bold;
  content:"\e608";
  font-family: 'icomoon';
	speak: none;
	font-style: normal;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	line-height: 1;

	/* Better Font Rendering =========== */
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
  position:relative;
  top:-20px;
  left:-50px;
  transition:all ease-in-out .4s;
}

.max-sm-size .proPage a:nth-child(3):hover:after{
  left:-50px;
}

.min-sm-size .proPage a:nth-child(3):before{
  color:#000;
  font-size:25px;
  font-weight:bold;
  content:"\e608";
  font-family: 'icomoon';
	speak: none;
	font-style: normal;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	line-height: 1;

	/* Better Font Rendering =========== */
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
  position:relative;
  top:5px;
  left:-20px;
  transition:all ease-in-out .4s;
}

.proPage a:nth-child(1):hover:after{
  color:#df201d;
  right:0px;
}

.green .proPage a:nth-child(1):hover:after{
  color:#009d42;
}

.proPage a:nth-child(3):hover:before{
  color:#df201d;
  left:0px;
}

.green .proPage a:nth-child(3):hover:before{
  color:#009d42;
}

.proPage a .pic{
  width:35%;
  display:inline-block;
}

.proPage a .pic img{
  width:100%;
}


.max-md-size .proPage.w80 {
  margin:30px 0 0 0;
}

.max-sm-size .proPage {
  position: relative;
  width:100%;
  padding:0 0 80px 0 !important;
}

.max-sm-size .proPage a {
  text-align:center;
}

.max-sm-size .proPage a .pic img {
  display:none;
}

.max-sm-size .proPage .next h3 {
	text-align: right;
}

.max-sm-size .proPage .back {
  width:85%;
  position: absolute;
  top: auto;
  left:0;
  right:0;
  bottom:0;
  margin:10px auto 20px auto;
  border: 1px solid #df201d;
  transition:all .4s;
  
  line-height: 33px;
    padding: 10px 40px;
}

.max-sm-size .green .proPage .back {
  border: 1px solid #009d42;
}

.max-sm-size .proPage .back:hover {
  color:#FFF;
  background-color: #df201d;
}

.max-sm-size .green .proPage .back:hover {
  background-color: #009d42;
}

/*== 頁碼 search =========================== */
.searchPage {
  text-align:center;
  margin-top:50px;
  margin-bottom:50px;
}

.searchPage a {
  color:#191919;
  font-size:15px;
  line-height:33px;
  padding:10px 40px;
  border-left: 1px solid #999;
}

.max-xs-size .searchPage a {
  padding:10px 30px;
}

.searchPage a:hover {
  color:#df201d;
}

.green .searchPage a:hover {
  color:#009d42;
}

.searchPage a:first-of-type{
  border-left: 1px solid transparent;
}

.searchPage > a:after,
.searchPage > a:before {
  color:#9fa0a1;
  font-size: 27px;
  width:33px;
  height:33px;
  border-radius:100%;
  display: inline-block;
  border: 1px solid #999;
  
  position:relative;
  top:2px;
  
  font-family: 'icomoon';
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  transition:all ease .4s;
}

.searchPage > .prev:after {
  content: "\e094";
  right:-15px;
}

.searchPage > .prev:hover:after {
  right:-5px;
  color:#df201d;
  border: 1px solid #df201d;
}

.green .searchPage > .prev:hover:after {
  color:#009d42;
  border: 1px solid #009d42;
}

.searchPage > .next:before {
  content: "\e095";
  left:-15px;
}

.searchPage > .next:hover:before {
  left:-5px;
  color:#df201d;
  border: 1px solid #df201d;
}

.green .searchPage > .next:hover:before {
  color:#009d42;
  border: 1px solid #009d42;
}

.max-md-size .searchPage.w80 {
  margin:30px 0;
  padding:0;
}

.max-md-size #news .searchPage.w80 {
  margin-top:0;
}

.max-sm-size .searchPage.w80 {
  position: relative;
  width:100%;
  padding:0 0 80px 0 !important;
}

.max-sm-size .proPage a {
	width: 45%;
	margin:0;
	display:inline-block;
}

.max-sm-size .proPage h3 {
	width: 100%;
}

.max-sm-size .searchPage .back {
  width:85%;
  position: absolute;
  top:50px;
  left:0;
  right:0;
  margin:10px auto auto auto;
  border: 1px solid #df201d;
  transition:all .4s;
}

.max-sm-size .green .searchPage .back {
  border: 1px solid #009d42;
}

.max-sm-size .searchPage .back:hover {
  color:#FFF;
  background-color: #df201d;
}

.max-sm-size .green .searchPage .back:hover {
  background-color: #009d42;
}

/*== 無上下頁  =========================== */
.searchPage > a.noPage,
.searchPage > a.noPage:hover {
  color:#ccc;
}

.searchPage > a.noPage:after,
.searchPage > a.noPage:before,
.searchPage > a.noPage:hover:after,
.searchPage > a.noPage:hover:before {
  color:#ccc;
  border: 1px solid #ccc;
}

.searchPage > .prev.noPage:hover:after {
  right:-15px;
}
.searchPage > .next.noPage:hover:before {
  left:-15px;
}


/*== product 影片 =========================== */
.pro-video .box {
  width:50%;
  float:left;
}

.pro-video .box .pic:after {
  content:"";
  width:100%;
  height:100%;
  position: absolute;
  left: 0;
  top: 0;
  z-index:1;
  display:block;
  background-color: rgba(0, 0, 0, .25);
}

.pro-video .box a{
  display: block;
    position: relative;
}

.pro-video .pic {
    height: 510px;
    overflow: hidden;
}

.pro-video .pic .in {
    width: 100%;
    height: 510px;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    position: relative;
}

.pro-video .box .text {
    position: absolute;
    top: 50%;
    z-index:1;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    margin: auto;
    width: 100%;
    text-align: center;
    z-index: 5;
}

.pro-video .box .text p {
    font-size: 30px;
    color: #F0F0F0;
    line-height: 1.5;
}

.pro-video .box .text i {
  margin-bottom:25px;
  display:block;
}

/* ==========================================================================
    case
 ========================================================================== */
.caseList {
  margin:auto;
  text-align:center;
}

.caseList li {
  width: 29%;/*修改*/
  margin: 1.5%;
  overflow: hidden;
  display: inline-block;
  vertical-align: top;
}

.caseList li a {
  cursor:default;
}

.caseList li .in {
  text-align: center;
  height: 260px;
  display: block;
  position: relative;
}

.caseList li .pic {
  position: absolute;
  top:0;
  right:0;
  bottom:0;
  left:0;
  margin: auto;
  z-index: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  opacity: 1;
}

.caseList li .text {
  margin-top:15px;
}

.caseList li .text .name {
  color:#4c4c4c;
  font-size:18px;
  line-height:1.4;
  overflow:hidden;
  margin:0 0 10px 0;
  padding:0 8px;
  float:left;
}

.caseList li .text .place {
  color:#999;
  font-size:15px;
  position:relative;
  padding:0 8px;
  float:right;
}

.caseList li .text .place:before {
  content: "";
  width: 1px;
  height: 25px;
  display: block;
  background-color: #CCC;
  position: absolute;
  top: -3px;
  left: -5px;
}

/*size*/
.max-md-size .caseList {
  padding: 3% 0;
}

.max-md-size .caseList li {
  /*width: 45%;*/
  overflow: hidden;
  display:inline-block;
  border: 1px solid #f2f2f2;
}

.max-md-size .caseList li .text .name {
  min-height:50px;
}

.max-md-size .caseList li .in {
  height: 240px;
}

.max-sm-size .caseList {
  padding: 6% 0;
}

.max-sm-size .caseList li {
  width: 100%;
  margin:1em 0;
}

.max-sm-size .caseList li .in {
  height: 200px;
}

.max-sm-size .caseList li .text .name {
  float:none;
  min-height: auto;
}

.max-sm-size .caseList li .text .place {
  float:none;
  display:inline-block;
}

.max-sm-size .caseList li .text .place:after {
  content: "";
  width: 1px;
  height: 25px;
  display: block;
  background-color: #CCC;
  position: absolute;
  top: -3px;
  right: -5px;
}

/*.max-xs-size .caseList {
  padding: 6% 0;
}

.max-xs-size .caseList li {
  width: 100%;
  margin:1em 0;
}

.max-xs-size .caseList li .in {
  height: 200px;
}*/

/* ==========================================================================
    knowledge
 ========================================================================== */
.knowledge .section .note {
  text-align:left;
  margin-top:20px;
}

.knowledge .section .note p {
  font-size:16px;
  line-height: 1.5;
}

/**/
.section:nth-child(even)  {
  background-color:#f9f9f9;
}

.section .html {
  text-align:center;
  padding:40px 0;
}

.knowledge .section .html p{
  text-align: left;
}

.section .html p {
  color:#333;
  font-size:18px;
  line-height: 2.5;
}

.section .html > .heading {
  font-size:25px;
  font-weight:bold;
  margin:35px 0;
}

/**/
.section .textCont {
  text-align:center;
  padding:40px 0;
}

#new .section .textCont {
  text-align: left;
}

.section .textCont p {
  color:#333;
  font-size:18px;
  line-height: 2.5;
}

.section .textCont img {
  max-width:100%;
}

.section .textCont > .heading {
  font-size:25px;
  font-weight:bold;
  margin:35px 0;
  text-align:center;
}

.max-md-size .section .textCont > .heading {
  margin:15px 0;
}

.max-md-size .section .textCont {
  padding:35px 0;
  /*padding:20px 0;*/
  text-align:left;
}

.max-sm-size .section .textCont > .heading {
  margin:20px 0;
}

.max-sm-size .section .textCont p {
  font-size:15px;
  line-height: 2;
}

/*.max-md-size .section .textCont p {
  font-size: 16px;
  line-height: 35px;
}*/

/**/

.knowledge .banner-know {
  position:relative;
}

.knowledge .banner-know img{
  max-width:100%;
}

.knowledge .banner-know i {
  position: absolute;
  z-index: 1;
  height: 135px;
  width: 115px;
  /*height: 100px;
  width: 90px;
  background-image: url(images/knowledge/knowledge-4-inco.png);*/
  background-repeat: no-repeat;
}

.knowledge .banner-know i:nth-child(1){
  background-image: url(images/knowledge/knowledge-4-inco6.png);
  top:20%;
  left:20%;
}

.knowledge .banner-know i:nth-child(2){
  background-image: url(images/knowledge/knowledge-4-inco1.png);
  top:40%;
  left:51%;
}

.knowledge .banner-know i:nth-child(3){
  background-image: url(images/knowledge/knowledge-4-inco3.png);
  top:80%;
  left:35%;
}

.knowledge .banner-know i:nth-child(4){
  background-image: url(images/knowledge/knowledge-4-inco4.png);
  top:70%;
  left:48%;
}

.knowledge .banner-know i:nth-child(5){
  background-image: url(images/knowledge/knowledge-4-inco2.png);
  top:80%;
  right:25%;
}

.knowledge .banner-know i:nth-child(6) {
  background-image: url(images/knowledge/knowledge-4-inco5.png);
  top:50%;
  left:57%;
}

/*isze*/
.max-bg-size .knowledge .banner-know i:nth-child(2){
  top:40%;
  left:41%;
}
.max-md-size .knowledge .banner-know i {
  background-size:80%;
}
.max-md-size .indoorList .list p {
  padding:20px 5% 0 5%;
}
.max-md-size .knowledge .banner-know i:nth-child(1){
  top:10%;
  left:10%;
}
.max-md-size .knowledge .banner-know i:nth-child(2){
  top:30%;
  left:51%;
}
.max-md-size .knowledge .banner-know i:nth-child(3){
  top:40%;
  left:20%;
}
.max-md-size .knowledge .banner-know i:nth-child(4){
  top:60%;
  left:38%;
}
.max-md-size .knowledge .banner-know i:nth-child(5){
  top:70%;
  right:10%;
}
.max-md-size .knowledge .banner-know i:nth-child(6) {
  top:20%;
  left:77%;
}

.max-sm-size .knowledge .banner-know i {
  background-size:60%;
}
.max-xs-size .knowledge .banner-know i {
  background-size:40%;
}
.max-xs-size .knowledge .banner-know i:nth-child(2) {
  top: 10%;
}
.max-xs-size .knowledge .banner-know i:nth-child(5){
  top:50%;
  right:0%;
}

/*== knowledge 換氣知識 / 如何拥有室内好空气？  =========================== */
.indoorList {
  margin:30px 0;
}

.indoorList .list {
  width: 29.5%;
  margin: 1.5%;
  display: inline-block;
  vertical-align: top;
}

.indoorList .list h4 {
  font-size:25px;
  font-weight:bold;
  padding:10px 0;
}

.indoorList .list p {
  font-size:18px;
  line-height:1.6 !important;
  padding:20px 15% 0 15%;
}

/*size*/
.max-md-size .indoorList .list h4 {
		text-align:center;
}

.max-sm-size .indoorList .list {
  width: 100%;
  margin: 2% 0;
}

.max-sm-size .indoorList .list h4 {
    font-size: 26px;
    padding: 8px 0;
}

.max-sm-size .indoorList .list img {
	margin:auto;
	display:block;
}

.max-sm-size .indoorList .list p {
  padding:20px 5% 0 5%;
}

/*== knowledge 換氣知識 / 认识换气产品  =========================== */
.knowPro {
  width:70%;
  margin:auto;
}

.knowPro .list {
  width: 29.5%;
  margin: 1.5%;
  display: inline-block;
  vertical-align: top;
}

.knowPro .list img{
  max-width: 100%;
}

/* ==========================================================================
    knowledge 安裝場所 (地圖)
 ========================================================================== */

.placeBox {
  padding: 0 0 30px 0;
  background-color: #f9f9f9;
  position: relative;
  background-image: url(images/knowledge/knowledge-3-bg.jpg);
}

.placeBox .place {
  text-align:center;
  padding:10px;
  display:block;
  position:relative;
  top:-35px;
}

.placeBox .place .local {
  color:#FFF;
  font-size:23px;
  display:inline-block;
  min-width:60px;
  padding: 7px 10px;
  margin:0 auto;
  position: relative;
  top:-95px;
  background-color:#e76908;
}

.green .placeBox .place .local {
  background-color:#fdc03f;
}
 
.placeBox .place .mark {
  width:280px;
  display:block;
  background-color:transparent;
  position:absolute;
}

.placeBox .place .mark1 {
  top:90px;
  right:70px;
}

.placeBox .place .mark2 {
  top:480px;
  right:117px;
}

.placeBox .place .mark3 {
  top:390px;
  right:330px;
}

.placeBox .place .mark4 {
  top:170px;
  right:413px;
}

.placeBox .place .mark5 {
  top:580px;
  left:45px;
}

.placeBox .place .mark6 {
  top:320px;
  left:260px;
}

.placeBox .place .mark:after {
  content:"";
  background-image: url(images/knowledge/knowledge-3-inco.png);
  background-repeat: no-repeat;
  height: 50px;
  width: 50px;
  position: absolute;
  left:0;
  right:0;
  margin:0 auto;
  top:-45px;
  /*top:-60px;*/
  -webkit-animation: 1s ease-in alternate none infinite running bounce2;
          animation: 1s ease-in alternate none infinite running bounce2;
}

.placeBox .place .info {
  color:#FFF;
  width:280px;
  height:130px;
  padding:15px;
  display:block;
  border-radius:10px;
  background-color: rgba(225, 35, 35, .9);
  display: none;
}

.green .placeBox .place .info {
  background-color: rgba(8, 150, 65, .9);
}

.placeBox .place .mark:hover .info {
  display: block;
}

.placeBox .place .info h4 {
  font-size:19px;
  font-weight:bold;
}

.placeBox .place .info p {
  font-size:15px;
}

.max-bg-size .placeBox .place .info {
  display: block;
}

.max-bg-size .placeBox .place .mark3 {
    top: 295px;
    right:195px;
}
.max-bg-size .placeBox .place .mark6 {
    top: 370px;
    left: 290px;
}

/* ==========================================================================
    knowledge 空污质量报导 列表
 ========================================================================== */
.knowAirList {
  margin:auto;
  text-align:center;
}

.knowAirList li {
  width: 30%;
  margin: .2% 1.5%;
  overflow: hidden;
  display: inline-block;
  vertical-align: top;
}

.knowAirList li .in {
  text-align: center;
  height: 260px;
  display: block;
  position: relative;
  cursor: default;
}

.knowAirList li .pic {
  position: absolute;
  top:0;
  right:0;
  bottom:0;
  left:0;
  margin: auto;
  z-index: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  opacity: 1;
}

.knowAirList li .inner {
  color: #FFF;
  text-align: center;
  background-color: rgba(225, 35, 35, 0.8);
  width: 100%;
  height:100%;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  opacity:0;
  				transition: All 0.4s ease-in-out;
  -webkit-transition: All 0.4s ease-in-out;
     -moz-transition: All 0.4s ease-in-out;
       -o-transition: All 0.4s ease-in-out;
      -ms-transition: All 0.4s ease-in-out;
}

.green .knowAirList li .inner {
  background-color: rgba(20, 130, 50, 0.8);
}

.knowAirList li:hover .inner {
  top: 0;
  opacity:1;
}

.knowAirList li .inner:after {
  content:"";
  width: 105px;
  height:75px;
  padding:0;
  margin:auto;
  display:block;
  border: 1px solid #FFF;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 2;
}

.knowAirList li .text {
  width:75%;
  
  transform: translateX(-50%) translateY(-50%);
  -webkit-transform: translateX(-50%) translateY(-50%);
  display: inline-block;
  position: absolute;
  top: 50%;
  left: 50%;
  right: auto;
  bottom: auto;
  z-index: 1;
}

.knowAirList li .text .subject {
  color:#FFF;
  font-size:18px;
  letter-spacing:1px;
  overflow:hidden;
  line-height:75px;
  padding:0;
  transform: translateX(-50%) translateY(-50%);
  -webkit-transform: translateX(-50%) translateY(-50%);
  display: inline-block;
  position: absolute;
  top: 50%;
  left: 50%;
  right: auto;
  bottom: auto;
  z-index: 1;
}

.knowAirList li .name {
  font-size:18px;
  color:#4c4c4c;
  line-height:1.4;
  height:75px;
  overflow:hidden;
  margin-top:15px;
}

/*size*/
.max-md-size .knowAirList {
  padding: 3% 0;
}

.max-md-size .knowAirList li {
  width: 45%;
  margin:.2% 1.5%;
  overflow: hidden;
  display:inline-block;
}

.max-md-size .knowAirList li .inner {
  background-color: rgba(225, 35, 35, 0.1);
  top: 0;
  opacity:1;
}

.max-md-size .green .knowAirList li .inner {
  background-color: rgba(20, 130, 50, 0.1);
}

.max-md-size .knowAirList li .inner:after {
  opacity:.6;
}

.max-md-size .knowAirList li .text .subject {
  text-align:left !important;
  height: auto;
  text-shadow: 0px 1px 3px rgba(0,0,0,0.65);
}

.max-md-size .knowAirList li .name {
  text-align:left;
}

.max-sm-size .knowAirList li .text .subject {
  font-size:23px;
}

.max-sm-size .knowAirList li .name {
  font-size:16px;
}

.max-sm-size .knowAirList li .in {
    height: 240px;
}

.max-xs-size .knowAirList li .in {
    height: 200px;
}

.max-xs-size .knowAirList {
  padding: 6% 0;
}

.max-xs-size .knowAirList li {
  width: 100%;
}

/* ==========================================================================
    contact
 ========================================================================== */
form.contact {
}

form.contact .w50 {
  width: 47%;
  margin-right:1em;
  float: left;
}

form.contact .form-group {
  position:relative;
}

form.contact ..form-group label:not(.form-check-label) {
  text-align:right;
  float:left;
  width:20%;
}

form.contact .form-group input:not([type="radio"]):not([type="checkbox"]),
form.contact .form-group select,
form.contact .form-group textarea {
  font-size:15px;
  width: 84%;
  float: right;
  height: 45px;
  border-radius:0;
  border: 1px solid #e8e8e8;
  background-color: #fbfbfb;
  -webkit-box-shadow: inset 0 0 0 rgba(0, 0, 0, 0) !important;
    box-shadow: inset 0 0 0 rgba(0, 0, 0, 0) !important;
}

form.contact .form-group .form-checks {
  color: #555;
  margin-bottom: 13px
}

form.contact .form-group textarea {
  height:100px;
}

/* placeholder*/
form.contact .form-group .form-control::-webkit-input-placeholder {
    color: #bfbfbf;
}

form.contact .form-group .form-control::-moz-placeholder {
    color: #bfbfbf;
}

/* firefox 19+ */
form.contact .form-group .form-control:-ms-input-placeholder {
    color: #bfbfbf;
}

/* ie */
form.contact .form-group .form-control input:-moz-placeholder {
    color: #bfbfbf;
}

form.contact .form-group .mainBtn {
  /*width: 98%;*/
  width:180px;
  margin:20px auto;
    background-color: #df2320;
    line-height:28px;
    border-radius:0;
}

.green form.contact .form-group .mainBtn {
  background-color: #01903d;
}

form.contact .form-group .mainBtn:hover {
  background-color: #c80f0f;
}

.green form.contact .form-group .mainBtn:hover {
  background-color: #028137;
}

form.contact .form-group .code {
  position:absolute;
  top:5px;
  right:14px;
}

/*size*/
.max-md-size form.contact .w50 {
  width: 100%;
  margin-right:0;
  float: none;
}

.max-md-size form.contact .form-group .mainBtn {
  width:100%;
  padding:10px 0;
}

.max-sm-size form.contact .form-group label:not(.form-check-label) {
  width: 20%;
  font-size:15px;
}
.max-sm-size form.contact .form-group input:not([type="radio"]):not([type="checkbox"]),
.max-sm-size form.contact .form-group select,
.max-sm-size form.contact .form-group textarea {
  width: 80%;
}

.max-xs-size form.contact .form-group .code {
  position:absolute;
  top:34px;
  right:3px;
}

.max-xs-size form.contact {
  padding:20px 0;
}

.max-xs-size form.contact .form-group label:not(.form-check-label) {
  text-align:left;
  font-size:15px;
  width: 100%;
  float: none;
  height: 25px;
  display: block;
}

.max-xs-size form.contact .form-group input:not([type="radio"]):not([type="checkbox"]),
.max-xs-size form.contact .form-group select,
.max-xs-size form.contact .form-group textarea {
  font-size:15px;
  width: 100%;
  float: none;
  height: 40px;
   display:block;
}

.max-xs-size form.contact .form-group .form-checks {
  font-size: 15px;
  width: 100%;
  float: none;
  height: auto;
  margin: 10px 0 20px;
}

.max-xs-size form.contact .form-group textarea {
  height:100px;
}


/* ==========================================================================
    contact [section]
 ========================================================================== */
#contact .section-1 {
  background-color:transparent;
}

#contact .section-1 .textCont {
  text-align:left;
  padding:0px 0;
}

#contact .section-1 .textCont p {
  color:#808080;
  font-size:15px;
}


#contact .section-1 .textCont .left {
  float:left;
  width:45%;
}


#contact .section-1 .textCont .right {
  float:right;
  width:53%;
}

/*size*/
.max-md-size #contact .section-1 .textCont .left {
  float:none;
  width:100%;
}

.max-md-size #contact .section-1 .textCont .right {
  float:none;
  width:100%;
}

#contact .section-2 {
  border-top-width: 1px;
  border-top-style: dotted;
  border-top-color: #C3C3C3;
}

#contact .section-2 > .heading {
  text-align:center;
  line-height:1.4;
  margin:10px 0;
}

#contact .section-2 > .heading > .cn {
  color:#000;
  font-size:20px;
  font-weight:bold;
  display:block;
  margin:5px 0;
}

#contact .section-2 > .heading > .en {
  color: #999;
  font-size: 18px;
  display: block;
  letter-spacing:1px;
  font-family: "微軟正黑體";
  height:45px;
  overflow:hidden;
}


/* ==========================================================================
    technical
 ========================================================================== */
#technical .section .heading {
  text-align:center;
  line-height:1.4;
  margin:10px 0;
}

#technical .section .heading > .cn {
  color:#000;
  font-size:20px;
  font-weight:bold;
  display:block;
  margin:5px 0;
}

#technical .section .heading > .en {
  color: #999;
  font-size: 18px;
  display: block;
  letter-spacing:1px;
  font-family: "微軟正黑體";
  height:45px;
  overflow:hidden;
}

#technical .section-bottom {
  border-top-width: 1px;
  border-top-style: dotted;
  border-top-color: #C3C3C3;
  /*border-top: 1px dotted #979797;*/
  /*border-top: 1px dotted #000;*/
}

/*頁碼*/
#downloads .searchPage,
#downloadsPro .searchPage {
  margin-top:0;
}

/* ==========================================================================
    nav2
 ========================================================================== */
#nav2 {
  text-align:center;
  position:relative;
  border-bottom: 1px solid #e9e9e9;
}

#nav2 ul {
  padding:0;
  margin: 0;
	list-style:none;
}

#nav2 ul li {
  display:inline-block;
  margin:0 -2px;
}

#nav2 ul li a {
  color: #515151;
  font-size: 16px;
  line-height:55px;
  display: block;
  min-width:140px;
  position: relative;
  padding: 0 15px;
  /*border: 1px solid #d4d4d4;*/
}

#nav2 ul li a.actived {
  color: #df201d;
  /*border-color: #df201d;*/
  text-decoration: none;
}

.green #nav2 ul li a.actived {
  color: #009d42;
}

#nav2 ul li a:hover {
  color:#FFF;
	background-color: rgba(225, 35, 35, .7);
}

.green #nav2 ul li a:hover {
  color:#FFF;
	background-color: rgba(20, 135, 70, .7);
}


/* 991 max-md-size */
.max-md-size #nav2 ul {
	width:100%;
  padding: 10px;
}

.max-md-size #nav2 ul li {
	width:48% !important;
  margin:5px 5px;
}

.max-md-size #downloads #nav2 ul li a.actived,
.max-md-size #downloadsPro #nav2 ul li a.actived {
	border:1px solid #df201d;
}

.max-md-size .green #downloads #nav2 ul li a.actived,
.max-md-size .green #downloadsPro #nav2 ul li a.actived {
	border:1px solid #009d42;
}

.max-md-size #nav2 ul li a {
	border: 1px solid #dcdcdc;
  padding:0;
}

/* 767 max-sm-size */
/*.max-sm-size #nav2 {
  line-height:0;
}*/
.max-sm-size #nav2 ul {
  padding: 0;
  margin:-3px 0 0 0;
}

.max-sm-size #nav2 ul li{
	width:100% !important;
  margin:0;
}

.max-sm-size #nav2 ul li a {
  font-size:18px;
  font-weight:normal;
  line-height:55px;
  border: none;
  border-bottom: 1px solid #dcdcdc;
  margin: 0;
}

/*.max-sm-size #nav2 ul li a.actived {
	display:none;
}*/

.max-sm-size #nav2 ul {
	display:none;
}

.max-sm-size #downloads #nav2 ul,
.max-sm-size #downloadsPro #nav2 ul {
	display: block;
	padding:15px 10px;
}

.max-sm-size #downloads #nav2 ul li a,
.max-sm-size #downloadsPro #nav2 ul li a {
	margin:6px 0;
}

.max-sm-size #downloads #nav2 ul li a.actived,
.max-sm-size #downloadsPro #nav2 ul li a.actived  {
    color: #FFF;
    background-color: rgba(225, 35, 35, .7);
}

.max-sm-size .green #downloads #nav2 ul li a.actived,
.max-sm-size .green #downloadsPro #nav2 ul li a.actived  {
  background-color: rgba(0, 157, 66, .85);
}

.max-sm-size #nav2 ul li a.actived {
  color: #9a9a9a;
  background-color: #fff;
  border-color: #dcdcdc;
}

/**/
.max-sm-size #designers #nav2 ul {
	display: block;
}
.max-sm-size #designers #nav2 ul {
	width:100%;
  padding: 10px;
}

.max-sm-size #designers  #nav2 ul li {
	width:47% !important;
  margin:5px 5px;
}

.max-sm-size #designers #nav2 ul li a.actived {
  color:#df201d;
	border:1px solid #df201d;
}

.max-sm-size .green #designers #nav2 ul li a.actived {
  color:#009d42;
	border:1px solid #009d42;
}

.max-sm-size #designers  #nav2 ul li a {
  line-height: 50px;
	border: 1px solid #dcdcdc;
  padding:0;
}

.max-xs-size #designers  #nav2 ul li {
	width:46% !important;
  margin:5px 3px;
}


/* ==========================================================================
    nav3
 ========================================================================== */
#nav3 {
  text-align:center;
  position:relative;
  padding:55px 0 5px 0;
}

#nav3 ul {
  padding:0;
  margin: 0;
	list-style:none;
}

#nav3 ul li {
  display:inline-block;
  margin:0 -2px;
}

#nav3 ul li a {
  color: #515151;
  font-size: 16px;
  line-height:40px;
  display: block;
  min-width:150px;
  position: relative;
  padding: 0 15px;
  margin: 0 5px;
  border: 1px solid #d4d4d4;
}

#nav3 ul li a.actived {
  color: #df201d;
  border-color: #df201d;
  text-decoration: none;
}

.green #nav3 ul li a.actived {
  color: #009d42;
  border-color: #009d42;
}

#nav3 ul li a:hover {
  color:#FFF;
	background-color: rgba(225, 35, 35, .7);
}

.green #nav3 ul li a:hover {
	background-color: rgba(20, 135, 70, .7);
}

.max-md-size #nav3 {
  padding:35px 0 5px 0;
}

.max-md-size #nav3 ul li {
	width:48%;
	margin:4px -2px;
}

.max-md-size #nav3 ul li a {
  padding: 6px 15px;
}

.max-xs-size #nav3 ul li {
	width:98%;
}


/*.max-md-size #nav3 ul {
	width:100%;
  padding: 10px;
}

.max-md-size #nav3 ul li {
	width:48% !important;
  margin:5px 5px;
}

.max-md-size #nav2 ul li a {
	border: 1px solid #dcdcdc;
  padding:0;
}


.max-sm-size #nav3 {
  line-height:0;
}

.max-sm-size #nav3 ul {
  padding: 0;
  margin:-3px 0 0 0;
}

.max-sm-size #nav3 ul li{
	width:100% !important;
  margin:0;
}

.max-sm-size #nav3 ul li a {
  font-size:18px;
  font-weight:normal;
  line-height:55px;
  border: none;
  border-bottom: 1px solid #dcdcdc;
  margin: 0;
}

.max-sm-size #nav3 ul li a.actived {
	display:none;
}

.max-sm-size #nav3 ul {
	display:none;
}

.max-sm-size #nav3 ul li a.actived {
  color: #9a9a9a;
  background-color: #fff;
  border-color: #dcdcdc;
}*/

/* ==========================================================================
    downloadsPro & designers 下載專區 共用
 ========================================================================== */
.downProList {
  margin: 20px auto ;
  text-align:center;
}

.downProList li {
  margin: 0 5em 20px 0;
  overflow: hidden;
  display: inline-block;
  vertical-align: top;
}

.downProList li .pic {
  width:210px;
  height:175px;
  position:relative;
  transition:All 0.4s ease-in-out;
  -webkit-transition:All 0.4s ease-in-out;
  -moz-transition:All 0.4s ease-in-out;
  -o-transition:All 0.4s ease-in-out;
}

.downProList li .pic img{
  height:95%;
  display:block;
  /*置中*/
  transform: translateX(-50%) translateY(-50%);
  -webkit-transform: translateX(-50%) translateY(-50%);
  display: inline-block;
  position: absolute;
  top: 50%;
  left: 50%;
  right: auto;
  bottom: auto;
  z-index: 1;
}

/*.downProList li:hover .pic{
  transform:scale(1.1);
  -webkit-transform:scale(1.1);
  -moz-transform:scale(1.1);
  -o-transform:scale(1.1);
  -ms-transform:scale(1.1);
}*/

.downProList li .name {
  color:#4c4c4c;
  font-size:16px;
  line-height:1.4;
  min-height:50px;
  overflow:hidden;
  margin-top:15px;
}

.downProList li a {
  color: #a1a1a1;
  font-size: 15px;
  display: block;
  padding:10px 0;
  margin: 8px 0;
  border: 1px solid #c9c9c9;
  transition:all .3s;
}

.downProList li a:hover {
  color: #FFF;
  background-color:#df201d;
  border: 1px solid #df201d;
}

.green .downProList li a:hover {
  background-color:#009d42;
  border: 1px solid #009d42;
}

/* ==========================================================================
    designers 設計師專區
 ========================================================================== */
.section-login {
  width:500px;
  /*width:450px;*/
  margin:0 auto;
}

.max-xs-size .section-login {
  width:90%;
  margin:0 5%;
}

/* ==========================================================================
    designers 設計師專區 form.login
 ========================================================================== */
form.login {
  margin:20px 0;
}
form.login .form-group {
  position:relative;
}

form.login .form-group label:not(.form-check-label) {
  font-size:16px;
    display: inline-block;
    float: left;
    width: 20%;
    vertical-align: top;
    height: 45px;
    color: #6C6C6C;
    font-weight: normal;
    padding-right: 10px;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: end;
    -webkit-justify-content: flex-end;
    -ms-flex-pack: end;
    justify-content: flex-end;
}

form.login .form-group input:not([type="radio"]):not([type="checkbox"]),
form.login .form-group select,
form.login .form-group textarea {
  width:75%;
  float: left;
  height: 45px;
  border-radius:0;
  border: 1px solid #e8e8e8;
  background-color: transparent;
}

form.login .form-group textarea {
  height:100px;
}


.max-xs-size form.login .form-group label:not(.form-check-label) {
  text-align:left;
    display: block;
    float: none;
    width: 100%;
    height: 25px;
    padding:0 5px;
}

.max-xs-size .login .form-group input:not([type="radio"]):not([type="checkbox"]),
.max-xs-size form.login .form-group select,
.max-xs-size form.login .form-group textarea {
    width: 100%;
    float: none;
    height: 40px;
}

/* placeholder*/
form.login .form-group .form-control::-webkit-input-placeholder {
  color: #808080;
  font-size:15px;
}

form.login .form-group .form-control::-moz-placeholder {
  color: #808080;
  font-size:15px;
}

/* firefox 19+ */
form.login .form-group .form-control:-ms-input-placeholder {
  color: #808080;
  font-size:15px;
}

/* ie */
form.login .form-group .form-control input:-moz-placeholder {
  color: #808080;
  font-size:15px;
}

/* placeholder-color*/
form.login .form-group.colorBlack .form-control::-webkit-input-placeholder {
  color: #000;
  font-weight:bold;
}

form.login .form-group.colorBlack .form-control::-moz-placeholder {
  color: #000;
  font-weight:bold;
}

/* firefox 19+-color */
form.login .form-group.colorBlack .form-control:-ms-input-placeholder {
  color: #000;
  font-weight:bold;
}

/* ie -color*/
form.login .form-group.colorBlack .form-control input:-moz-placeholder {
  color: #000;
  font-weight:bold;
}

form.login .form-group .code {
  position:absolute;
  top:5px;
  right:30px;
}

.max-xs-size form.login .form-group .code {
  display:block;
  position: relative;
  top:-5px;
  right:inherit;
  left:5px;
  text-align: left;
}

form.login .form-group .btns-hr {
  padding:20px 0;
}

form.login .mainBtn {
  background-color: #000;
  color: #fff;
  font-size:15px;
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}

form.login .mainBtn:hover {
  color: #fff;
  background-color: #c80f0f;
}

.green form.login .mainBtn:hover {
  background-color: #028137;
}

form.login .btns-hr .btn {
  width: 130px;
  padding: .7em .6em;
  margin: 5px 15px;
  border-radius:5px;
}

.max-md-size form.login .btns-hr .btn {
  width: 160px;
  padding: .8em 2em;
}

.max-xs-size form.login .btns-hr .btn {
  width: 100%;
}

.max-xs-size form.login .form-group .btns-hr a {
  margin: 5px 5px;
}

/* ==========================================================================
    頁籤 designers 設計師專區
 ========================================================================== */
#designers .abgne_tab {
  text-align:center;
}

#designers ul.tabs {
  width: 100%;
    position: relative;
    border-bottom: 1px solid #e9e9e9;
}

#designers ul.tabs li {
  display: inline-block;
    margin: 0 -2px;
}

#designers ul.tabs li a {
  color: #515151;
    font-size: 16px;
    line-height: 55px;
    display: block;
    min-width: 140px;
    position: relative;
    padding: 0 15px;
}

#designers ul.tabs li a:hover {
  background: #ccc;
}

#designers ul.tabs li.active a{
  color: #df201d;
  text-decoration: none;
}

.green #designers ul.tabs li.active a{
  color: #009d42;
}

#designers ul.tabs li a:hover {
  color:#FFF;
	background-color: rgba(225, 35, 35, .7);
}

.green #designers ul.tabs li a:hover {
	background-color: rgba(20, 130, 50, .7);
}

#designers div.tab_container {
  clear: left;
  width: 100%;
  border: 1px solid #999;
  border-top: none;
  background: #fff;
}

#designers div.tab_container .tab_content {
  padding:20px 0;
}

#designers div.tab_container .tab_content h2 {
  margin: 0 0 20px;
}

.max-md-size #designers ul.tabs {
	padding:20px 0 0 0;
  margin:0;
}

.max-md-size #designers ul.tabs li.active a{
	color:#FFF;
  background-color: rgba(225, 35, 35, .7);
}

.max-md-size .green #designers ul.tabs li.active a{
  background-color: rgba(20, 130, 50, .7);
}

.max-sm-size #designers ul.tabs {
	padding:20px 0;
	margin:0 ;
}

.max-sm-size #designers ul.tabs li {
  border: 1px solid #e9e9e9;
	margin:5px 2px;
}

.max-xs-size #designers ul.tabs li {
	width:48%;
}

/* ==========================================================================
    designers 設計師專區 彈跳視窗
 ========================================================================== */
.fancyHd {
  color:#808080;
  font-size:20px;
}

.max-sm-size .fancyHd {
  font-size:18px;
}

.fancyInfo {
  color:#000;
  font-size:15px;
  margin:20px;
}

/**/
#designers .fancyBox .mainBtn {
    background-color: #000;
    color: #fff;
    font-size: 15px;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
}

#designers .fancyBox .mainBtn:hover {
  color: #fff;
  background-color: #c80f0f;
}


/* ==========================================================================
    terms
 ========================================================================== */

#terms .html {
  padding:40px 0;
}

#terms .html strong {
  font-size:17px;
}

#terms .html p {
  color:#333;
  font-size:16px;
  line-height: 2;
}

/* ==========================================================================
    search
 ========================================================================== */
#search .html{
  color: #545454;
}

#search .resultBox {
  font-size: 16px;
  text-align: center;
  padding:12px 0;
  margin:10px 0;
  border: 1px solid #afafaf;
  border-radius:5px;
}

#search .resultBox .red {
  font-size: 18px;
  font-weight:bold;
}

#search .textCont {
  margin-bottom:60px;
}

.max-md-size #search .textCont {
  margin-bottom:40px;
}

/*== 列表  =========================== */
.resultList {
}

.resultList .list {
  width:100%;
  border-bottom: 1px dotted #666;
}

.resultList .list .result {
  width:65%;
  float:left;
  color:#3f3f3f;
  font-size:18px;
  padding:20px 10px;
  transition:all ease .4s;
}

.resultList .list:hover .result {
  color:#df201d;
}

.green .resultList .list:hover .result {
  color:#009d42;
}

.resultList .list:hover {
  background-color: rgba(225, 35, 35, .05);
}

.green .resultList .list:hover {
  background-color: rgba(20, 130, 50, .05);
}

.resultList .list .siteMap {
  width: 35%;
  float: right;
  padding: 20px 10px;
}

.resultList .list .siteMap:before {
  content:"";
  width: 1px;
  height:18px;
  padding-left:5px;
  border-left: 1px solid #afafaf;
}

.resultList .list .siteMap span {
  color:#8c8c8c;
  font-size:13px;
}

.resultList .list .siteMap span:before{
  content:">";
  padding:0 7px;
}

.resultList .list .siteMap span:first-of-type:before{
  content:"";
}
/**/
.max-md-size .resultList .list {
  display:block;
  padding:10px 0;
}

.max-md-size .resultList .list .result {
  width:100%;
  float:none;
  display:block;
  padding:15px 10px;
  
  /*color:#3f3f3f;
  font-size:18px;
  padding:20px 10px;
  transition:all ease .4s;*/
}

.max-md-size .resultList .list .siteMap {
  width:100%;
  float:none;
  padding: 5px 10px;
}

/**/
#pro-mv > .home-mv {
  width:50%;
  margin:-2px;
  display:inline-block
}


#pro-mv > .home-mv .box .info {
	top: 70%;
}

.max-bg-size .home-mv .box .play {
  background-size:cover;
  width: 65px;
  height: 65px;
  left:0;
  right:0;
  margin:auto;
}

.max-bg-size .home-mv .box .info {
  font-size: 28px;
}

.max-lg-size #pro-mv > .home-mv .box .info {
  bottom:20px;
}

.max-md-size .home-mv .box .play {
  width: 60px;
  height: 60px;
  -webkit-transform: translateY(-60%);
  -ms-transform: translateY(-60%);
  transform: translateY(-60%);
}

.max-md-size .home-mv .more {
  top: 70%;
}
.max-sm-size #pro-mv > .home-mv {
  width:100%;
}

.max-xs-size .home-mv .more {
  top: 55%;
}

.max-xs-size .home-mv .more i {
  width:80%;
  margin:auto;
}

.max-xs-size .home-mv .more i img{
  max-width:50%;
}

.max-xs-size .home-mv .box .play {
  top:30%;
  width: 50px;
  height: 50px;
  -webkit-transform: translateY(-70%);
  -ms-transform: translateY(-70%);
  transform: translateY(-70%);
}

.max-xs-size .home-mv .box .info {
  font-size: 18px;
}

.max-sm-size .home-mv .more span {
  display:none;
}
.table {
  min-width: 1024px;
}

/*.table > thead > tr > td {
  color: #2DB587 !important;
  border-bottom: 2px solid #2DB587;
  padding-top: 1em;
  padding-bottom: 1em;
  vertical-align: middle;
  text-align: left;
  color: #6B6B6B;
  font-size: 15px;
}
.table > tbody > tr > td {
  padding-top: 1.5em;
  padding-bottom: 1.5em;
  vertical-align: middle;
  text-align: left;
  color: #6B6B6B;
  font-size: 15px;
}
.table > tbody > tr:last-child > td {
  border-bottom: 2px solid #D9D9D9;
}
.table > tfoot > tr > td {
  padding-top: 1em;
  padding-bottom: 1em;
}
.table .select {
  padding: 1em;
  border: 1px solid #DCDCDC;
}*/


/*pagination*/

.pagination {
  padding-top:0;
  margin: 0 0 20px 0 !important;
}

/*#search .pagination {
	margin: 50px 0 20px 0!important;
}*/

.pagination > li {
  width: 35px;
  height: 35px;
}
.pagination > li > a {
  width: 35px;
  height: 35px;
  line-height: 35px;
  background-color: #F7F7F7;
  border-radius: 50%!important;
  margin: 0 7px;
  border: 0;
  color: #A4A4A4;
  font-size: 16px;
  font-style: normal;
  padding: 0;
}
.pagination > li > a .prev,
.pagination > li > a .next {
  display: block;
  width: 100%;
  height: 100%;
}
.pagination > li > a .prev {
  background: url(images/product/page-left.png) center no-repeat;
}
.pagination > li > a .next {
  background: url(images/product/page-right.png) center no-repeat;
}
.pagination > li.active a,
.pagination > li:hover a {
  /*background-color: #2DB587;*/
  background-color: rgba(225, 35, 35, .7);
  color: #fff;
}
.green .pagination > li.active a,
.green .pagination > li:hover a {
  background-color: rgba(0, 155, 65, .7);
}
.pagination > li.active a .prev,
.pagination > li:hover a .prev {
  background: url(images/product/page-left-w.png) center no-repeat;
}
.pagination > li.active a .next,
.pagination > li:hover a .next {
  background: url(images/product/page-right-w.png) center no-repeat;
}


.pagination > .active > a,
.pagination > .active > span,
.pagination > .active > a:hover,
.pagination > .active > span:hover,
.pagination > .active > a:focus,
.pagination > .active > span:focus {
  background-color: rgba(225, 35, 35, 1);
}

.green .pagination > .active > a,
.green .pagination > .active > span,
.green .pagination > .active > a:hover,
.green .pagination > .active > span:hover,
.green .pagination > .active > a:focus,
.green .pagination > .active > span:focus {
  background-color: rgba(0, 155, 65, 1);
}

/*网站使用条款*/
.liTerms {
  display:none !important;
}

.max-md-size .liTerms {
  display: block !important;
}

/**/
.form-control,
.max-md-size.form-control {
    -webkit-box-shadow: inset 0 0 0 rgba(0, 0, 0, 0) !important;
    box-shadow: inset 0 0 0 rgba(0, 0, 0, 0) !important;
}


/*產品列表*/
.listPro .list {
  float: left;
  width: 50%;
  margin: 0;
  position: relative;
  /*-webkit-transition: opacity 300ms ease-in-out;
          transition: opacity 300ms ease-in-out;*/
  -webkit-animation: fadeIn 1s both ease-in-out;
  				animation: fadeIn 1s both ease-in-out;
  border-bottom: 1px solid #d2d2d2;
  border-right: 1px solid #d2d2d2;
}

.listPro .list > a {
  height:480px;
  overflow:hidden;
  margin: 0;
  display: block;
  position: relative;
}

.listPro .pic {
  width: auto;
  height: 540px;
  position: absolute;
  top: -16%;
  right: -9%;
      -ms-transition: opacity 350ms ease-in-out, -ms-transform 400ms ease-in-out;
  -webkit-transition: opacity 350ms ease-in-out, -webkit-transform 400ms ease-in-out;
          transition: opacity 350ms ease-in-out, transform 400ms ease-in-out;
}

.listPro .pic img {
  height: 100%;
}

.listPro .list:hover .pic {
 		  -ms-transform: scale(1.07);
  -webkit-transform: scale(1.07);
  				transform: scale(1.07);
}


.listPro .list .text {
  position: absolute;
  top:25%;
  left:55px;
  z-index: 2;
}

.listPro .list a:after {
  content:"";
  background-image: radial-gradient(circle, rgba(0,0,0,0.4) 0%, rgba(0,0,0,0.65) 100%);
  width: 100%;
  height: 100%;
  display:block;
  opacity: 0;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index:1;

  		-ms-transition: opacity 400ms ease-in-out, -ms-transform 400ms ease-in-out;
  -webkit-transition: opacity 400ms ease-in-out, -webkit-transform 400ms ease-in-out;
  				transition: opacity 400ms ease-in-out, transform 400ms ease-in-out;
}

.listPro .list:hover a:after {
  opacity: 1;
}

.listPro .list .cn{
  color: #b21916;
  font-size:27px;
  font-weight:bold;
  letter-spacing:.5px;
  display:block;
  margin-bottom:15px;
      -ms-transition: opacity 350ms ease-in-out, -ms-transform 400ms ease-in-out;
  -webkit-transition: opacity 350ms ease-in-out, -webkit-transform 400ms ease-in-out;
          transition: opacity 350ms ease-in-out, transform 400ms ease-in-out;
}

.green .listPro .list .cn{
  color: #057712;
}

}

.listPro .list .en{
  color: #666;
  font-size:17px;
  min-height:45px;
  letter-spacing:.1em;
  /*min-height:60px;*/
  display:block;
      -ms-transition: opacity 350ms ease-in-out, -ms-transform 400ms ease-in-out;
  -webkit-transition: opacity 350ms ease-in-out, -webkit-transform 400ms ease-in-out;
          transition: opacity 350ms ease-in-out, transform 400ms ease-in-out;
}

.listPro .list .more {
  color: #df201d;
  font-size: 14px;
  text-align: center;
  line-height: 43px;
  height: 45px;
  width: 140px;
  display: block;
  /* margin: auto; */
  border: solid 1px #df201d;
}

.green .listPro .list .more {
  color: #009d42;
  border: solid 1px #009d42;
}

/*size*/
.max-bg-size .listPro .pic{
  top: -10%;
}

.max-bg-size .listPro .pic img {
  height:80%;
}

.max-md-size .listPro .list a:after {
  opacity: 1;
  background-image: radial-gradient(circle, rgba(0,0,0,0.4) 0%, rgba(0,0,0,0.45) 100%);
}

.max-md-size .listPro .list .text {
  position: absolute;
  top:25%;
  left:0;
  right:0;
  margin:auto;
  text-align:center;
}

.max-md-size .listPro .cn,
.max-md-size .listPro .en {
  color: #FFF;
}

.max-md-size .green .listPro .list .cn,
.max-md-size .green .listPro .list .en{
  color: #FFF;
}

.max-md-size .listPro .more {
  color: #FFF;
  background-color: #df201d;
  margin:auto;
}

.max-md-size .green .listPro .more {
  color: #FFF;
  background-color: #007400;
}

.max-mds-size .listPro .list > a {
  height:400px;
}

.max-sm-size .listPro .list {
  width: 100%;
  border-left: 1px solid #d2d2d2;
}

.max-sm-size .listPro .list > a {
  height:300px;
}

.max-sm-size .listPro .pic img {
  height:65%;
}

.max-sm-size .listPro .list .text {
  position: absolute;
  top:25%;
  left:20px;
  right:inherit;
  margin: inherit;
  text-align:left;
}

.max-sm-size .listPro .more {
  margin: inherit;
}

.max-xs-size .listPro .list a:after {
  /*opacity: 1;*/
	background-color:rgb(0,0,0);
	/*ie8*/ filter: progid:DXImageTransform.Microsoft.Alpha(opacity=10); 
	background-color:rgba(0,0,0,0.1);
}
.max-xs-size .listPro .pic img{
  z-index:0 !important;
}
.max-xs-size .listPro .list .text {
  z-index:99 !important;
  display:block;
}

.max-xs-size .listPro .pic .animated {
    -webkit-animation-duration: 0s;
    animation-duration: 0s;
    -webkit-animation-fill-mode: none;
    animation-fill-mode: none;
}
.max-xs-size .listPro .pic .scrollUp {
    -webkit-animation-name: none;
    -moz-animation-name: none;
    -o-animation-name: none;
    animation-name: none;
}
.max-xs-size .listPro .pic .animated {
    -webkit-animation-fill-mode: none;
    -moz-animation-fill-mode: none;
    -ms-animation-fill-mode: none;
    -o-animation-fill-mode: none;
    animation-fill-mode: none;
    -webkit-animation-duration: 0s;
    -moz-animation-duration: 0s;
    -ms-animation-duration: 0s;
    -o-animation-duration: 0s;
    animation-duration: 0s;
}


/**/
.min-lg-size .listPro .list:hover .more {
  color: #FFF;
  background-color: #df201d;
}

.min-lg-size .green .listPro .list:hover .more {
  background-color: #009d42;
}

.min-md-size .listPro .list:hover .text .cn,
.min-md-size .listPro .list:hover .text .en{
  color: #FFF;
  /*    -ms-transform: scale(1.2);
  -webkit-transform: scale(1.2);
          transform: scale(1.2);*/
}

.ios {
  font-family: 'PingFang TC', 'Helvetica Neue', 'Helvetica', 'STHeitiTC-Light', 'Arial', sans-serif !important;
}
/*.ios {
  font-family: 'PingFang TC', 'Helvetica Neue', 'Helvetica', 'STHeitiTC-Light', 'Arial', sans-serif !important;
}*/



/*我要購買*/
#product #pro-buy{
  padding:40px 0 60px 0;
}

#product #pro-buy div.tab_container{
  width:90%;
  padding:0 5%;
}

#product #pro-buy div.tab_container .hasBar{
  text-align:center;
  margin-bottom:25px;
}

#product #pro-buy div.tab_container .buyList {
  text-align:center !important;
}

#product #pro-buy div.tab_container .buyList .list {
  width:24%;
  margin:13px 0;
  display:inline-block;
  text-align:center;
}

#product #pro-buy div.tab_container .buyList .list img {
  max-width:100%;
  transition: opacity .4s;
  opacity:.65;
}

#product #pro-buy div.tab_container .buyList .list:hover img {
  opacity:1;
}

.max-lg-size #product #pro-buy div.tab_container {
  padding:0;
}

.max-md-size #product #pro-buy div.tab_container{
  width:95%;
}

.max-md-size #product #pro-buy div.tab_container .buyList .list {
  width:29.5%;
  margin:10px 1.5%;
}

.max-xs-size #product #pro-buy{
  padding:10px 0 50px 0;
}
.max-xs-size #product #pro-buy div.tab_container{
  width:90%;
}
.max-xs-size #product #pro-buy div.tab_container .buyList .list {
  width:46%;
  margin:8px 1.5%;
}

/**/
.qr-code {
  margin:10px 0 15px 0 ;
}

.qr-code img{
  max-width:110px;
}

/*首頁下拉選單文字顏色*/
.home form .form-group input:not([type="radio"]):not([type="checkbox"]),
.home form .form-group select,
.home form .form-group textarea {
 padding: 0 10px;
}

.home option {
 color:#000;
}