﻿.banner ul{ width: 100%; max-width: 1120px; position: absolute; left: 10%; bottom: 0px;  background-color: transparent; display: flex;    }
.banner ul li { cursor: pointer; width: calc(33.3% - 3px); height: 50px;  margin-right: 3px;   color: #fff; display: flex; align-items: center; justify-content: center; z-index: 9999; background-color: #1267b2;}
.banner ul li a { width: 100%; height: 100%; padding: 0 15px;  display: flex; align-items: center; justify-content: center;color: #fff; }
.banner ul li.not-current { color: #8c8c8c;}
.banner ul li:last-child { margin-right: 0;}
.banner ul li:hover { }
.banner ul.fixed li:hover {  color: #c8c8c8;  }

.banner ul.fixed{ max-width: 100%; padding: 0;   position: fixed;  bottom: inherit; top:0px!important;  left: 0; justify-content: center; }
ul.fixed li.current,ul.fixed li.current a span { color: #fff;}
ul.fixed li { width: auto; color: #c8c8c8; }
ul.fixed li a span { color: #c8c8c8;}
ul.fixed li a:hover,ul.fixed li a:hover span {color: #fff;}
ul.fixed li:after {  content: ''; min-width: 1px; height: 11px; margin: 0 25px; background-color: rgba(255, 255, 255, 0.3); display: block;}
ul.fixed li:last-child:after { display: none;}
ul div.list-title { height: 50px; color: #fff; display: flex; align-items: center; justify-content: center;}
ul.fixed div.list-title { order: 0;}
ul.fixed li { order: 1; }
.banner .navfix{top: 50px;  }
.banner .navfix ul{background: #242424!important;}

@media (max-width:1023px) {
  .banner ul.fixed {  position: fixed;  bottom: inherit; top: 59px !important; left: 0; }
  .banner ul { padding: 0; background-color: #0e416e; flex-direction: column;  left: 0;}
  .banner ul>* { border-top: solid 1px #0e416e; }
  .banner ul li {  width: 100%; max-width: none; margin: 0; transition: none; }
  .banner ul.fixed li:after { display: none; }
  
}

.ul-fixed { height:auto; }
@media (max-width:767px) {
.ul-fixed { height:auto; }
 .banner ul{left:0;}	
.banner ul.fixed  {  top: 59px!important; }
}

.product {max-width: 1080px;  padding-top:30px; margin:0px auto;}
.product li { width: 100%; height: 515px;  padding: 0 60px;  margin-bottom: 60px; background-color: #fff; position: relative; display: flex; align-items: center; box-shadow: 2px 4px 12px 1px rgba(0, 0, 0, 0.25);  -webkit-box-shadow: 2px 4px 12px 1px rgba(0, 0, 0, 0.25); -moz-box-shadow: 2px 4px 12px 1px rgba(0, 0, 0, 0.25); -o-box-shadow: 2px 4px 12px 1px rgba(0, 0, 0, 0.25);}
.product li.show:after { width: 0;}
.product li img {  width: 65%;  max-width: 750px; margin-right: 30px;  display: block;}
.text {  width: 35%; margin-left: 30px; display: flex; flex-direction: column;}
.text * { font-family: 'Myriad Pro','微軟正黑體'; line-height: 1.6;}
.text h2 { font-size: 1.25rem; font-weight: 700; margin-bottom: 30px;text-align: left; margin-left:0; }
.text>p { font-size: 1rem; text-align: left;  margin-bottom: 40px;}
.link-group { display: flex;}
.link-group a { width: 50%; padding-top: 10px; display: flex;  align-items: center;  justify-content: center;}
.link-group a p { font-size: 0.875rem;  text-align: center;}
.link-group a:first-child { margin-right: 5px;  border-top: solid 5px #c8c8c8;}
.link-group a:last-child { margin-left: 5px; border-top: solid 5px #000;}
.link-group a span { margin-right: 10px; margin-top: -2px;}
.product li:nth-child(even) img { order: 1; margin: 0 0 0 30px;}
.product li:nth-child(even) div.text { order: 0;}

@media (max-width:768px) {
.product { transform: translate3d(0,-60px,0);}
.product li { width: 97%;  margin: 20% auto;padding: 0 40px; }
.product li img {  width: 55%; }
.text { width: 45%; }
.product li:nth-child(even) img { margin: 0 0 0 0px;}	
}
@media (max-width:767px) {
.product {   transform: translate3d(0,-150px,0);}
.product li { padding: 30px 10px 20px 10px; height: auto; flex-direction: column;}
.product li img,.product li.swap img {width: 100%; margin: 0 0 30px 0; order: 0; }
.text { width: 100%; margin: 0; }
}
/*=========product-list===============*/
.first-catalog {  width: 100%; max-width: 1440px;  padding: 20px 60px;  margin: 0 auto;}
.product-list{  width: 100%; max-width: 1080px;  margin: 0 auto; display: flex; flex-wrap: wrap; justify-content: flex-start;}
.product-list li{ width: 50%; max-width: 540px; padding: 30px 20px 65px 20px; position: relative;}
/*.product-list li:nth-child(2n) { opacity: 0;  transform: translateX(100px);  transition: all 1s ease .2s;  -webkit-transition: all 1s ease .2s; -moz-transition: all 1s ease .2s;  -o-transition: all 1s ease .2s;  -ms-transition: all 1s ease .2s;}
.product-list li:nth-child(2n+1) { opacity: 0; transform: translateX(-100px); transition: all 1s ease .2s;-webkit-transition: all 1s ease .2s; -moz-transition: all 1s ease .2s; -o-transition: all 1s ease .2s; -ms-transition: all 1s ease .2s;}*/
.product-list li a:nth-child(2n),.product-list li a:nth-child(2n+1) { transform: translateX(0);  opacity: 1;}
.product-list li a div.up { width: 100%; max-height: 375px; overflow: hidden; position: relative; padding-bottom: 75%; transition: all .5s ease;  -webkit-transition: all .5s ease; -moz-transition: all .5s ease; -o-transition: all .5s ease; -ms-transition: all .5s ease;}
.product-list li a:hover div.up {transform: scale(0.9);}
.product-list li a div.up img { width: 90%; margin: 0 auto; display: block; position: absolute;  top: 0; left: 0; right: 0;}
.product-list li a div.down {  max-width: 440px; margin: 0 auto 0 auto;}
.product-list li a div.down h2,.product-list li a div.down h3,.product-list li div.down p { font-weight: 700; color: #2c2c2d;  line-height: 1.6; text-align: center;}
.product-list li div.down h2 {font-size: 1.25rem;margin-bottom: 25px;}
.product-list li div.down h3 { font-size: 1rem;}
.product-list li div.down p { font-size: 1rem; font-weight: normal;}
.product-list li:after,.product-list li:before {pointer-events: none; content: ''; width: 100%; height: 100%; box-sizing: border-box;  position: absolute; top: 0;  left: 0; -webkit-transform: scale(0); transition: 0.5s;}
.product-list li:after { border-top: 15px solid #ededed;  border-right: 15px solid #ededed; -webkit-transform-origin: 100% 0%;}
.product-list li:before { border-bottom: 15px solid #ededed; border-left: 15px solid #ededed;  -webkit-transform-origin: 0 100%;}
.product-list li:hover:after,.product-list li:hover:before { -webkit-transform: scale(1);}
span.line {width: calc(100% - 80px);  height: 17px;  background-color: #ededed; position: relative; margin: 0 auto 90px auto; display: block; transition: all .5s ease;-webkit-transition: all .5s ease;  -moz-transition: all .5s ease; -o-transition: all .5s ease; -ms-transition: all .5s ease;}
.product-list li:hover span.line { width: calc(100% - 120px); height: 5px;  margin-bottom: 102px;}
@media (max-width:768px) {
.first-catalog { padding: 60px 20px; }
.product-list li a div.down h2 { margin-bottom: 16px; }
.product-list li a div.down h3 {  margin-bottom: 4px;  }
.product-list li a div.up {  max-height: 275px; }
}

@media (max-width:767px) {
.product-list li a{ width: 100%; margin-bottom: 20px; padding: 55px 30px 70px 30px; }
.product-list li a:after,.product-list li a:before { -webkit-transform: scale(1);}
}
@media (max-width:767px) and (orientation : landscape) {
.first-catalog .product-list li{justify-content: center;}
}
/*============product-first-catalog end===============*/

/*============product-second-catalog ===============*/
.second-catalog { width: 100%;  max-width: 1440px;  padding: 20px 60px;  margin: 0 auto;}
.product-list-2 { max-width: 1080px; min-width: 1080px;  margin: 0 auto; display: flex; flex-wrap: wrap;}
.product-list-2> li {  width: 25%; max-width: 270px; margin-bottom: 80px; padding: 0 20px; position: relative;}
.product-list-2 li {  position: relative; display: block;}
.product-list-2 li a.icon-mark:before { display: none;}
.product-list-2 li a div.down>p {display: none;}
.product-list-2 li a img { margin-bottom: 45px;}
.product-list-2 li a h2 { font-size: 1.25rem; font-weight: 700; margin-bottom: 50px;}
.product-list-2 li a h2>span { font-size: 0.875rem; margin-left: 8px;}
.product-list-2 li a h3 { font-size: 0.875rem; font-weight: 700; text-align: center; line-height: 1.6; display: flex; align-items: center; flex-wrap: wrap; justify-content: center;}
.product-list-2 li a h3>span { font-size: 0.8125rem;  font-weight: normal;  margin-left: 8px;}

.product-list-2>li.show:before { width: 0;}
.product-list-2>li:after {  content: ''; min-width: 1px; height: 100%; background-color: #ededed; position: absolute; right: 0; top: 0;  display: block;}
.product-list-2>li:nth-child(4n):after,.product-list-2>li:last-child:after { display: none;}


@media (max-width:1080px) {
  .product-list-2 {  min-width: inherit; }
}

@media (max-width:768px) {
  .second-catalog { padding: 35px 30px 60px 30px; }
  .product-list-2 { justify-content: center; }
  .product-list-2>li {  width: 50%;  margin-bottom: 50px;padding: 15px 0; flex-direction: column;  }
  .product-list-2>li.open:before {display: none;}
  .product-list-2 li img { order: 0;  }
  .product-list-2 li h2 { order: 1;  width: 90%; margin-bottom: 0; }
  .product-list-2 li a div.down{ display: none; }
  .product-list-2>li:nth-child(4n):after { display: block; }
  .product-list-2>li:nth-child(2n):after { display: none; }
}

@media (max-width:410px) {
.second-catalog { padding: 35px 10px 60px 10px; }
.product-list-2>li { padding: 0 15px; }
}

/*============product-show ===============*/
/*machine*/
.machine { background-color: #f9f9f9; opacity: 1;}
.product-box {  max-width: 1340px;  padding: 115px 20px; margin: 0 auto;}
.product-box h2,.specifi h2,.information h2{ font-size: 1.875rem;  font-weight: 700;  text-align: center;  margin-bottom: 30px; }
.machine-slick {max-width: 960px; padding:60px 20px;  margin: 0 auto;}
.machine-slick li {}
.machine-slick li img {  max-height: 520px;  margin: 0 auto; display: block;}
.spec { cursor: pointer;  width: 300px; margin: 40px auto 0 auto; text-align: center;}
.spec span.icon-mark {color: #000; display: block; margin: auto;}
.spec p {font-size: 1rem;font-weight: 700;  margin-top: 14px;color: #000; }
/*specifi*/
.specifi { padding: 115px 0 0 0; }
.box { max-width: 1120px; padding: 0 20px; margin: 0 auto; }
div.pdf {  display: none;}

.box table {  width: 100%; text-align: center;}
.box table thead tr { padding: 20px 0;}
.box table thead tr th { font-size: 0.875rem;  padding: 20px 0; font-weight: normal; line-height: 1.6rem; color: #fff;  background-color: #000;  width: 155px;}
.box table tbody tr td:first-child { font-size: 1.25rem; font-weight: 700;}
.box table tbody tr td { padding: 30px 0px!important; border-bottom: solid 1px #ccc; }
.box table tbody tr:first-child td:last-child,.box table tbody tr:last-child td {  border-bottom: solid 3px #000;}
.box table tbody tr td.pdf_window { border-bottom:none; }
.box table tbody tr td.pdf_window a {  position: relative;   display: inline-block; }
.box table tbody tr td.pdf_window a.no-download:after { content: ''; width: 28px; height: 36px;  background-color: rgba(255, 255, 255, 0.4);  position: absolute; left: 12px;  top: 11px;  display: block;}
@media (max-width:1023px) {
.box table thead { display: none; }
.box table tbody tr { }
.box table tbody tr td { width: 100%; height: 60px; padding: 0 50px; line-height: 2rem; text-align: left; border: none; background-color: #f9f9f9; display: flex; justify-content: space-between; align-items: center;}
.box table tbody tr td:before { content: attr(data-title); display: block;  }
.box table tbody tr:first-child td:last-child, .box table tbody tr:last-child td { border: none; }
td.pdf_window a{display: none;}
table tbody tr td:first-child,table tbody tr:last-child td:first-child {border-bottom: solid 1px #ccc; margin-top: 80px;}
table tbody tr:first-child td:first-child {margin-top: 0px;}
.box div.pdf { font-size: 1.25rem; font-weight: 700; adding: 0 49px; margin-top: 20px;  border-bottom: solid 3px #000;display: flex; justify-content: space-between; align-items: center; }
}

.pdf_window{ vertical-align: middle; }

@media (max-width:767px) {
.box table tbody tr td,.box div.pdf { padding: 0 20px; }
}

@media (max-width:380px) {
.box {  padding: 0 10px; }
}








/*.box table {  width: 100%; text-align: center;}
.box table thead tr { padding: 20px 0;}
.box table thead tr th { font-size: 0.875rem;  padding: 20px 0; font-weight: normal; line-height: 1.6rem; color: #fff;  background-color: #000;  width: 155px;}
.box table tbody tr td:first-child { font-size: 1.25rem; font-weight: 700;}
.box table tbody tr td { padding: 30px 0px!important; border-bottom: solid 1px #ccc; }
.box table tbody tr:first-child td:last-child,.box table tbody tr:last-child td { border-bottom: solid 3px #000;}
.box table tbody tr td.pdf_window{height: auto; }
.box table tbody tr td.pdf_window a { display: flex; justify-content: center; align-items: center; }
.box table tbody tr td.pdf_window a.no-download:after { content: ''; width: 28px; height: 36px;  background-color: rgba(255, 255, 255, 0.4);  position: absolute; left: 12px;  top: 11px;  display: block;}

@media (max-width:1023px) {
.box table thead { display: none; }
.box table tbody tr { }
.box table tbody tr td { width: 100%; height: 60px; padding: 0 50px; line-height: 2rem; text-align: left; border: none; background-color: #f9f9f9; display: flex; justify-content: space-between; align-items: center;}
.box table tbody tr td:before { content: attr(data-title); display: block;  }
.box table tbody tr:first-child td:last-child, .box table tbody tr:last-child td { border: none; }
td.pdf_window {display: none;}
table tbody tr td:first-child,table tbody tr:last-child td:first-child {border-bottom: solid 1px #ccc; margin-top: 80px;}
table tbody tr:first-child td:first-child {margin-top: 0px;}
.box div.pdf { font-size: 1.25rem; font-weight: 700; adding: 0 49px; margin-top: 20px;  border-bottom: solid 3px #000;display: flex; justify-content: space-between; align-items: center; }
}

@media (max-width:767px) {
.box table tbody tr td,.box div.pdf { padding: 0 20px; }
}

@media (max-width:380px) {
.box {  padding: 0 10px; }
}*/

/*------------information---------------------*/
.information { padding: 115px 60px 0 60px;opacity: 0;}
.info {max-width: 1080px; margin: 0 auto;}
.info ul.list {}
ul.list>li { text-align: center; display: flex;}
ul.list li p.num { font-size: 1rem;  width: 100px;  margin-right: 4px; padding-top: 50px; line-height: 1.6;}
ul.list li p.title { font-size: 1.25rem; font-weight: 700; width: 300px; margin: 0 4px; padding: 50px 25px 0 25px; line-height: 1.6;}
ul.list li p.textarea,ul.list li ol,ul.list li ul { font-size: 1rem; width: 763px; margin-left: 4px; padding: 50px 0 50px 40px;  text-align: justify; line-height: 1.6;}
ul.list li>* {  border-bottom: solid 1px #ccc;}
ul.list li:first-child>* {  border-top: solid 2px #000;}
ul.list li:last-child>* { border-bottom: solid 2px #000;}


@media (max-width:1023px) {
.information { padding: 115px 20px 0 20px;}
}

@media (max-width:767px) {
  ul.list li:first-child>* {border-top: none; }
  ul.list li>* {}
  ul.list li { flex-wrap: wrap; margin-bottom: 20px;}
  ul.list li p.num { align-self: center; }
  ul.list li p.num, ul.list li p.title { width: 50%; margin: 0; border-bottom: none; }
  ul.list li p.textarea,  ul.list li ol,  ul.list li ul  { width: 100%; padding: 50px 0 50px 20px;  border-bottom: solid 1px #ccc !important;  border-top: solid 1px #ccc !important; }
}
@media (max-width:380px) {
 .info {padding: 0 10px; }
}
.contact { padding: 115px 0 140px 0; opacity: 0;}
.contact a>* {font-size: 1.25rem;font-weight: 600;margin: 0 auto;}
.contact h2 {  width: 350px; text-align: center; line-height: 1.6;  margin-bottom: 50px; font-weight: 900;}
.contact p {  cursor: pointer;  width: 140px; height: 140px; border-radius: 50%; background-color: #005bac;  color: #fff; display: flex; align-items: center; justify-content: center;}
.contact p span { width: 90px; text-align: center; line-height: 1.6;}
/*= ==product-show.html end==========================================*/

/* product prev & next */
.pdt_link-box{
  padding: 50px 5px 0;
  max-width: 800px;
  margin: 0 auto;
  display: flex;
  justify-content: flex-end;
}
.pdt_link-son div{
  margin-right: 10px;
}
.pdt_link-son { 
  display: flex;
}
.pdt_link-bpn a{
  display: flex;
  padding: 10px 28px;
  align-items: center;
}
.pdt_link-bpn {
  color: #000;
  background-color: #dadada;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 2px 5px rgba(0, 0, 0, .4);
  border: 1px solid #aaa;
  display: flex;
  align-items: center;
  justify-content: center;
}
.pdt_link-prev img{margin-right: 20px;vertical-align: top;transition: all 0.3s;}
.pdt_link-next img{margin-left: 20px;vertical-align: top;transition: all 0.3s;}
.pdt_link-prev:hover img {transform: translateX(-10px);}
.pdt_link-next:hover img {transform: translateX(10px);}
@media only screen and (max-width:600px) {
  .pdt_link-box{
    flex-wrap: wrap;
  }
  .pdt_link-son {
    width: 100%;
    justify-content: center;
  }
  .pdt_link-social {
    margin-top: 15px;
  }
}
@media only screen and (max-width:400px) {
  .pdt_link-bpn a{
    padding: 8px 16px;
  }
}