/*b-lazy*/
.b-lazy {  opacity:0;}
.b-loaded { opacity:1;}
.board { display: flex;}
.board>* { width: 50%;}
div.lay-btn { cursor: pointer; width: 35px; height: 20px; position: relative;display: flex; align-items: center;}
div.lay-btn:before { content: ''; width: 30px; height: 1px; background-color: #222222; display: block;}
div.lay-btn:after { content: '';  width: 0; height: 0; border-style: solid; border-width: 5px 0 5px 5px; border-color: transparent #222222; display: block;}
.guide-btn { padding-bottom: 120px; display: flex; align-items: center; justify-content: center;}
.guide-btn span.line { width: 2px; height: 12px; background-color: #dcdcdc;}
.guide-btn a { width: 160px; height: 40px; position: relative; display: flex; align-items: center; justify-content: center;}
.guide-btn a p { font-size: 1.125rem; font-weight: 600; -webkit-transition: all .5s ease; -moz-transition: all .5s ease; -ms-transition: all .5s ease; -o-transition: all .5s ease; transition: all .5s ease;}
.guide-btn a:hover p { color: #075498;}
.guide-btn a span { color: #999999; -webkit-transition: all .5s ease;  -moz-transition: all .5s ease; -ms-transition: all .5s ease; -o-transition: all .5s ease; transition: all .5s ease;}
.guide-btn a span.icon-keyboard_arrow_left { font-size: 1.75rem; margin-right: 5px; width: 16px; height: 16px;   background:  url(../images/icon/icon-arrow.svg) no-repeat left -1px; background-size:8px auto;}
.guide-btn a span.ham { margin-left: 15px;}
.guide-btn a span.ham span { width: 18px; height: 2px; margin-bottom: 3px; display: block; -webkit-transition: all .5s ease; -moz-transition: all .5s ease; -ms-transition: all .5s ease; -o-transition: all .5s ease; transition: all .5s ease;background-color: #999999;}
.guide-btn a span.ham span:last-child {  margin-bottom: 0;}
.guide-btn a.left:hover span {color: #075498;}
.guide-btn a.right:hover span.ham span {background-color: #075498;}
.frame{width:100%; height: 100%; display:flex; align-items: center; justify-content:center;}
/*========== page-point==========*/
.page-point { padding: 120px 20px 80px 20px;}
.page-point .wrap { max-width: 1080px; margin: 0 auto; display: flex;}
.page-point  h2 {width: 100%; max-width: 360px; font-size: 2.8rem; font-weight: 900; color: #005bac;}
.page-point .wrap-box{  width: 100%; max-width: 720px;}
.page-point h3 {margin-bottom: 20px; font-size: 1.25rem; font-weight: 700; line-height: 1.6;}
.page-point p { font-size: 1rem; line-height: 1.6;}
@media only screen and (max-width:1180px) {
  .app_arrow-bown {
    height: 20px;
    width: 20px;
    background-image: url(../images/icon/arrow-down.png);
    background-size: cover;
    display: inline-block !important;
    position: absolute;
    right: 40px;
  }
}
@media (max-width:1024px) {
.page-point { padding: 120px 80px 80px 80px; }
.page-point .wrap  { width: 100%; flex-direction: column;}
.page-point  h2 { margin-bottom: 24px;}
}
/*========== application==========*/
.application {  padding: 40px 0 60px 0;}
.application section.left { max-width: 1440px; margin: 0 auto; padding: 0 60px;}
section.left a.application-box {  max-width: 930px;  margin-bottom: 75px; display: flex; align-items: center; position: relative;}
section.left a.application-box div { width: 100%; max-width: 310px; padding: 0 0 0 40px;  opacity: 0; position: absolute; right: 0; top: 50%; z-index: -1; transform: translateY(-50%);  transition: all .5s ease .5s; -webkit-transition: all .5s ease .5s; -moz-transition: all .5s ease .5s;  -o-transition: all .5s ease .5s; -ms-transition: all .5s ease .5s;}
section.left a.application-box.show div { z-index: 1; opacity: 1;}
section.left a.application-box div h2 { font-size: 1.25rem; font-weight: 700; line-height: 1.6; margin-bottom: 20px; text-align: left;}
section.left a.application-box div p { line-height: 1.6; margin-bottom: 20px; overflow: hidden;  text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;}
section.left a.application-box div span { font-size: 1.25rem;  color: #a9a7a7;}
section.left a.application-box div span.icon-plus { width: 12px; height: 12px;  display: inline-block;   margin-right: 5px; background-size: 12px auto;opacity: .5;  background:  url(../images/icon/icon-plus.svg) no-repeat left top #f8f8f8; }
section.left a.application-box div p.link { font-size: 0.875rem;  color: #888;}
.core-responsive-slide.open .application .right span {margin-left: 270px;margin-right: -270px}
section.left a.application-box picture {width: 100%; height: 100vw; max-height: 480px; background-repeat: no-repeat; background-size: cover;position: relative; display: block; transition: all .3s ease .3s; -webkit-transition: all .3s ease .3s; -moz-transition: all .3s ease .3s; -o-transition: all .3s ease .3s; -ms-transition: all .3s ease .3s;font-size: 0; }
section.left a.application-box.show picture { width: 620px;}
section.left a.application-box picture img {display: none;}

@media (max-width:1024px) {
  section.left a.application-box picture { width: 620px; }
  section.left a.application-box div { opacity: 1; z-index: 1;}
}

@media (max-width:1023px) {
  .page-point {padding: 120px 60px 80px 60px;}
  section.left a.application-box.show picture,section.left a.application-box picture {width: 100%;}
  section.left a.application-box {flex-direction: column;}
  section.left a.application-box div { max-width: none; padding: 20px 20px 0 20px; position: relative; top: 0; transform: none;}
  section.left a.application-box div span { display: none;}
}

@media (max-width:767px) {
  .page-point { padding: 120px 20px 20px 20px; }
  .application section.left { padding: 0 20px; }
  section.left a.application-box { margin-bottom: 35px; flex-direction: column; }
  .application section.left a img { width: 100%; margin-bottom: 12px; }
  section.left a.application-box div { padding: 12px 0 0 0; }
  section.left a.application-box div p { display: none; }
}
.application section.right { width: 100%; max-width: 1320px; height: 1px; position: fixed; left: 50%; top: 30%; display: flex; justify-content: flex-end; transform: translate(-50%, -50%);}
.application section.right>span { display: none;}
@media only screen and (min-width:1201px) {
  .application section.right>span { display: none !important;}
}
.application section.right ul { display: flex; flex-direction: column;}
.application section.right ul li {margin-bottom: 22px;}
.application section.right ul li a {max-width: 300px; margin-left: auto; display: flex; align-items: center; justify-content: flex-end;font-size: 1.125rem;}
.application section.right ul li a:after { content: ''; width: 5px; height: 5px; margin-left: 35px; display: block;background-color: #cccccc;}
.application section.right ul li.current a { color: #005bac;}
.application section.right ul li.current a:after {background-color: #005bac;}
@media (max-width:1200px) {
  .application section.right { width: 100%; height: auto; position: absolute; top: 180px; left: 0; z-index: 5; transform: none;}
  .application section.right>span { display: block; }
  .application section.right ul { background-color: #1267b2;}
  .application section.right ul li { height: 50px; margin-bottom: 0;}
  .application section.right ul li a {width: 100%; height: 100%; max-width: none; justify-content: center; color: #fff; font-size: 1.25rem; font-weight: 600; letter-spacing: 0.05rem;}
  .application section.right ul li a:after { display: none;}
  .application section.right ul li.current a {color: #ccc;}
  .application section.right span { width: 100vw; height: 50px;position: fixed; left: 0; top: 50px; padding-top: 17px;display: none;font-size: 1.125rem;letter-spacing: 2px;color: #fff; text-align: center; visibility: hidden; border-bottom: solid 1px #8eb2d0; background-color: #1267b2; transition: all .7s ;  -webkit-transition: all .7s ;  -moz-transition: all .7s ;  -o-transition: all .7s ; -ms-transition: all .7s ;}
  .application section.right.dotfix span { visibility: visible; display: block; }
  .application section.right.open span { top: 0; }
  .application section.right.dotfix ul { width: 100%; position: fixed; top: 105px; left: 0; transition: all .5s ease; -webkit-transition: all .5s ease; -moz-transition: all .5s ease; -o-transition: all .5s ease; -ms-transition: all .5s ease; }
  .application section.right.dotfix.open ul {height: calc(100vh - 50px);padding: 40px 0;overflow: scroll;top: 50px;}
  /* header.in { transform: translate( 0px);} */
  header.in.open { transform: translate(-50% , -105px);}
}
@media only screen and (max-width: 992px) {
  .application section.right span { top: 59px;}
}
@media (max-width:767px) {
  header.in.open { transform: translate(0 , -80px);}
  .application section.right { top: 0px;}
  .application section.right span { top: 59px; }
  .application section.right.dotfix ul {top: 100px;}
  .application section.right ul li { height: 40px;}
  .application section.right ul li a {font-size: 1.15rem;}
}
/*===================================application-info.html==========================================*/
/*輪播左右箭頭*/
div.lay-btn { position: absolute; top: calc(50% - 10px); z-index: 5;}
div.lay-btn.prev-button {left: -120px;}
div.lay-btn.next-button {right: -120px;}
div.lay-btn.prev-button:before {order: 1;}
div.lay-btn.prev-button:after {border-width: 5px 5px 5px 0;}

/*輪播 點點樣式*/
.slick-dots { bottom: 25px;}
.slick-dots li button:before { content: ''; background-color: #201f1f; width: 7px; height: 7px; opacity: 1; left: 7px; top: 7px;}
.slick-dots li.slick-active button:before { background-color: #1267b2;}

/*.banner*/
.banner.application-info picture { max-width: 1080px; margin: 0 auto; position: relative;}
.banner.application-info picture img { margin: 0 auto;display: block;}

.slick-dotted.slick-slider { margin-bottom: 0;}
.slick-slide>div { font-size: 0;}

/*.info-text*/
.info-text { width: 100%; max-width: 1320px; margin: 0 auto; border-bottom: solid 5px #f0f0f0;}
.info-text section { max-width: 1080px; margin: 0 auto; padding: 120px 80px 70px 80px;}
.info-text section>* { color: #222222; line-height: 1.6;}
.info-text h2{ margin-bottom: 25px; font-size: 1.25rem; font-weight: 700;}
.info-text p{ font-size: 1rem; margin-bottom:0px;}

@media (max-width:767px) {
  .info-text section { padding: 60px 20px;}
  .slick-dots { bottom: -40px; }
}

/* machine*/
.machine { width: 100%;  max-width: 1620px; display: block; margin: auto; padding: 115px 0 135px 0; overflow: hidden;}
.machine h2{ margin-bottom: 60px;font-size: 1.875rem; font-weight: 600; text-align: center;}
.product-list-2 { max-width: 1080px; min-width: 1080px;  margin: 0 auto; display: flex; flex-wrap: wrap;}
.product-list-2 li {  width: 100%; max-width: 320px; margin-bottom: 80px; padding: 0 20px;; display: block; position: relative;}
.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;}
.product-list-2 div.slick-list li:after {  content: ''; min-width: 1px; height: 100%; background-color: #ededed; position: absolute;  right: 0; top: 0; display: block;}
.product-list-2 div.slick-list { overflow: visible;}
.product-list-2 div.slick-slide { max-width: 100%; }
.product-list-2.slick-initialized .slick-slide {opacity: .3;  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-2.slick-initialized .slick-active {opacity:1;  transition: all .5s ease;  -webkit-transition: all .5s ease; -moz-transition: all .5s ease; -o-transition: all .5s ease; -ms-transition: all .5s ease;}


@media (max-width:1080px) {
  .product-list-2 {  min-width: inherit; }
}

@media (max-width:768px) {

  .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; }
}