/* Reset ====================================================================*/
* { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-kerning: auto; }
/* CSS Document */
body { font-family:Microsoft JhengHei,'Poppins', sans-serif; overflow-x:hidden; margin:0; padding:0; color: #333; }
h1 {  font-size: 1.2em; font-weight: 400; color: #333; }
h2 { font-size: 2.6em; font-weight: 400; color: #000; margin: 5% auto; }
h3, h4 { font-size: 1.25em; font-weight: 400; }
h5, h6 { font-size: 1.125em; font-weight: 400 }
h1, h2, h3, h4, h5, h6 { display: block; margin: 0.5rem auto; font-family:Microsoft JhengHei,'Muli', sans-serif; line-height: 1em; }
p { color: #333; line-height: 1.65rem; margin-bottom: 30px; }
a { color:#1B92D3; text-decoration: none; -moz-transition: color 0.25s ease, opacity 0.25s ease; -o-transition: color 0.25s ease, opacity 0.25s ease; -webkit-transition: color 0.25s ease, opacity 0.25s ease; transition: color 0.25s ease, opacity 0.25s ease }
a:hover, a:focus {  color: #111; text-decoration: none; outline: none;  transition: all 0ms ease 0s;  -webkit-transition: all 0ms ease 0s; -o-transition: all 0ms ease 0s;}
img { max-width: 100%; height: auto; vertical-align: bottom; }
a img { border: none; }
article a { word-wrap: break-word; word-break: keep-all; }
strong { font-weight: 700; }
article, section { word-wrap: break-word; word-break: keep-all; }
input, select, textarea { margin: 1% auto; padding: 1%; font-size: .85em; line-height: 1.5em; outline: none; box-sizing: border-box; font-family: Microsoft JhengHei,'Noto Sans TC','Arial',  Microsoft JhengHei, Lucida Sans Unicode, sans-serif}
/* Default ====================================================================*/
.wrap {width: 100%; max-width: 1360px; margin: 0 auto; display: block; }
.container {margin:0; padding-top: 80px;  width: 100%; display:block;}
.table_scroll { overflow-x: auto; }
.mobile { display: none; }

/* Basic ======================================================================*/
.title {  margin-bottom: 50px; position: relative; font-family: Microsoft JhengHei,'Poppins'; font-weight: 400; font-size: 35px;  text-align: center; }
.title:after { content: ''; display: block;  width: 100px;  height: 2px; background: linear-gradient( 135deg, #BC1006 10%, #F6A800 100%);  position: absolute;  bottom: -30px; left: calc(50% - 50px); }
.title span { color: #d85a03; }
.subtitle {  font-family: Microsoft JhengHei,'Poppins'; font-weight:100;margin: 45px 0px; color:#df6c02;text-align: center; font-size: 18px; line-height: 27px;    }
.text-center { text-align: center }
.color-white{color:#fff;}
.color-blue{ color: #0070c9;}
.color-red{color:#ff6440;}
.color-yellow{color:#ffc90b;}

/* Banner =====================================================================*/
.banner { background: url(../images/banner/visual-bg.jpg) repeat-x center top; background-size: 150% auto;    }
.banner .wrap { max-width: 1345px; position: relative; }
.slides{width: 100%; display: block; margin: auto; max-width: 1345px; padding: 0 40px;}
.slides li {  width: 100%;  position: relative; display: flex; ;  flex-wrap:wrap;   justify-content:flex-start;  align-items: flex-start; vertical-align:middle; transition: 0.3s; }
.visual-img { width: 100%;   }


.slogan { display: flex;  flex-wrap:wrap;  position: absolute; width: 50%; left:50%; margin: 20% auto auto auto;  z-index: 99;  transition: 0.6s ; text-shadow: 0px 3px 5px rgba(0,0,0,.2);  }
.slogan h1,.slogan h2,.slogan h3,.slogan p{width: 100%; display: block;   }
.slogan p{ margin-bottom: 20px;}
.slogan .fontBig { font-size: 52px; font-weight: 700;    }
.slogan .fontMin { font-size: 32px; font-weight: 700;  }
.slogan .fontSml { font-size: 22px;  }
.slogan .blue { color: #3e79ea; }
.slogan .bothLine { display: flex; justify-content: center; align-items: center; }
.slogan .bothLine:before, .slogan .bothLine:after { content: ''; background: #0EDC94; width: 25px; height: 1px; }
.slogan .bothLine:before { margin-right: 30px; }
.slogan .bothLine:after { margin-left: 30px; }

/* Products ===================================================================*/
.idx-products { text-align: center; }
.idx-products .wrap {  max-width: 725px;  font-size: 18px; padding: 75px 0 50px 0; }
.idx-products p{ font-weight: 200; }
.idxpro-wrap { width:90%;  max-width: 1345px;   margin: 0 auto 40px auto; }
.idxpro-wrap li {   position: relative;    font-size: 16px;  color: #fff; text-align: center;overflow: hidden; background:#fdca7c;  }
.idxpro-wrap li * { -webkit-box-sizing: border-box;  box-sizing: border-box;  -webkit-transition: all 0.45s ease; transition: all 0.45s ease;}
.idxpro-wrap li:after {  background-color: #ea8a01; top: 0;  content: ''; height: 5px;  left: 0; position: absolute;  width: 0%; -webkit-transition: all 0.45s ease; transition: all 0.45s ease;  }
.idxpro-wrap li a img { width: 100%; vertical-align: top; backface-visibility: hidden;}
.idxpro-wrap li a h3 {position: absolute; top: 0; bottom: 0; left: 0; right: 0;  margin: 0;align-items: center; z-index: 1; display: flex;  flex-direction: column; justify-content: center; font-size: 1em;  font-weight: 400; color: #fff;  letter-spacing: 1px; text-transform: uppercase; line-height: 1em; opacity: 0;transition: all .3s;}
.idxpro-wrap li:hover > a img,.idxpro-wrap li.hover > a img {opacity: 0.1;  }
.idxpro-wrap li:hover:after,.idxpro-wrap li.hover:after{ width: 100%;}
.idxpro-wrap li:hover a h3,.idxpro-wrap li.hover a{opacity: 1;transform: scale(1.1);transition: all .35s;}

/* About ======================================================================*/
.idx-about .wrap { max-width: 1360px; padding: 40px 20px; display: flex;  flex-wrap:wrap; font-size: 16px;   }
.half{  max-width: 49%; margin: 0px auto; }
.img-radius { max-width: 90%;  margin: 2% auto; }
.img-radius img{ border-radius: 5px;}
.idx-iso { width: 100%; display: flex; justify-content: center; margin: 50px 0 30px 0; }
/* Application ================================================================*/
.application {   padding: 100px 0 ; background: linear-gradient( rgba(43,182,211,0), rgba(43,182,211,0) ), url(../images/idx-application-bg.jpg)  center center  no-repeat; background-attachment: inherit; background-size: cover;overflow: hidden;}
.application .title { color:#fff;}
.application-list {  display: flex; flex-wrap: wrap;   }
.application-list li.flex-2 {  flex-grow: 0;  flex-shrink: 0;  flex-basis: 65%;  }
.application-list li.flex-2 img{width: 100%;  overflow: hidden; }
.application-list li{display: flex; flex: 0 0 32%; margin:5px; max-height: 300px;  justify-content: center; align-items: flex-start; position: relative; overflow: hidden;  color: #fff;text-align: center; box-shadow: 0 0 5px #555; transition: all 0.55s ease; background: #212121;}
.application-list li img{ width: 100%; height: auto; transition: all 0.55s ease;}
.application-list li:hover img{ opacity: 0.5;}
.application-list li .box-content{padding: 5px 10px 10px; position: absolute;bottom: 25px; right: 25px;}
.application-list li .box-content:before,.application-list li .box-content:after{content: ""; width: 767px; height: 2px;  position: absolute;  background: #fff; -webkit-transition: all 0.55s ease; transition: all 0.55s ease;}
.application-list li .box-content:before{  top: 0; left: 0; -webkit-transform: translateX(100%); transform: translateX(100%);}
.application-list li .box-content:after{  bottom: 0; right: 0; -webkit-transform: translateX(-100%);  transform: translateX(-100%);}
.application-list li .box-content-inner:before,.application-list li .box-content-inner:after{ content: "";  width: 2px;  height: 767px; position: absolute; background: #fff;  -webkit-transition: all 0.55s ease;  transition: all 0.55s ease;}
.application-list li .box-content-inner:before{  top: 0;  left: 0;  -webkit-transform: translateY(100%); transform: translateY(100%);}
.application-list li .box-content-inner:after{ bottom: 0; right: 0; -webkit-transform: translateY(-100%); transform: translateY(-100%);}
.application-list li:hover .box-content:before,.application-list li:hover .box-content:after,.application-list li:hover .box-content-inner:before,.application-list li:hover .box-content-inner:after{  -webkit-transform: translate(0, 0); transform: translate(0, 0);}
.application-list li:hover .box-content:before,.application-list li:hover .box-content:after{ -webkit-transition-delay: 0.15s; transition-delay: 0.15s;}
.application-list li h3{  font-size: 24px; font-weight: 400;  margin: 0; color: #fff; margin-bottom: 5px;}
.application-list li .post{  display: block;padding: 5px 10px; font-size: 16px; font-weight: 700; color: #434343;  background: #fff;}

/* News =======================================================================*/
.news-box .wrap { max-width: 1020px; margin: 70px auto; }
ul.news {  padding: 20px 0px; }

ul.news li{  display: flex; flex-wrap: wrap;  flex-direction:row;  width: 100%; max-width: 96%;  background: #fff; border: solid 1px #E2E0E0; border-radius:0px 0px 6px 6px;  }
ul.news li a{ text-decoration:none;}
ul.news li .inner{ padding:0 17px 17px 0; }
ul.news li figure{ width: 100%; height: auto;}
ul.news li .time{ display: inline-flex;flex-direction:column; width: 15%; margin-right: 10px; padding: 8px 15px;  text-align:center; background:#444;  font-size:26px;  color:#fff; font-weight:700; transition:background 0.20s linear 0s;}
ul.news li:hover .time{ background:#1B92D3;}
ul.news li .time small{ display:block;  margin-bottom:10px; font-size: 13px;text-transform: capitalize;}
ul.news li .time small:before{ content:""; display:block; margin-bottom:5px; border-top:1px solid #fff;}
ul.news li .inner .title{display: inline-flex;flex-direction:column;width: 70%;  margin-bottom: 6px; font-size:1.15rem;color: #282828; text-align: left; font-weight: 400; }
ul.news li .inner .title:after{ content: none;}
ul.news li .text { display: inline-flex;flex-direction:column;  width:90%; margin: 0 auto; padding: 15px 0px 0px 20px; font-weight: 200; line-height:1.35rem;  }
.news-btnbox { width: 100%; margin:  0  auto; display: flex; justify-content: center; }

/* Button ======================================================================*/
.animate, .btn, .btn-border:before, .btn-border:after { -webkit-transition: all 0.3s; transition: all 0.3s; }
.btn { display: inline-block; line-height:1em; margin:8px 4px; padding:8px 15px; font-size: 15px; position: relative; opacity: .999; border-radius: 4px; }
.btn i{ margin-right:5px;}
.btn-more { color: #fff;  padding:15px 50px !important;  font-weight: 400;background:#01306f; }
.btn-more:hover { color: #2aa1db;  background: #fff; border: solid 1px #2aa1db; box-shadow: 0px 1px 6px rgba(0,0,0,.5); }
.btn-more:after { content: "";  position: absolute; width: 10px; height: 10px; border-top: 1px solid #fff; border-left: 1px solid #fff; vertical-align: middle; transform: rotate(135deg); display: block; right: 22px;  top: 0; bottom: 0;  margin: auto; }
.btn-readmore {color: #333;}
a.btn-readmore { margin-top: 16px; padding: 10px 25px;    font-weight: 200;  color: #0979c2;  background-color: #fff; border:solid 1px #0979c2;}
a.btn-readmore:hover{ background: #0565ac; color: #fff; }
.btn-idxnews { padding: 10px 40px; color: #bc1006; background-color: transparent; border: solid 1px #C34320; border-radius:5px;  font-size: 15px; transition: 0.2s;}
.btn-idxnews:hover {border-color: #C34320; background: #bc1006; color: #fff;  transition: 0.3s;}
.btn-submit {  color: #fff; background: #D95225; padding: 10px 60px; }
.btn-submit:hover { box-shadow: 0 0 10px #333 inset; }
.btn-reset {  color: #fff; background: #6B6B6B; padding: 10px 60px; }
.btn-reset:hover { box-shadow: 0 0 10px #333 inset; }
.btn-delete { color: #fff; font-size: 15px; line-height: 15px; background: #7A7A7A; padding: 9px 35px; border-radius: 50px; }
.btn-delete:hover { background: #333; box-shadow: 0 0 10px #000 inset; }
.btn-inquiry {  display: inline-block; width: 75px; text-align: center; color: #fff; font-size: 15px; line-height: 15px; background: #D95225; padding: 7px 20px 7px 15px; border-radius: 50px; }
.btn-inquiry:before { content: '\f075'; display: inline-block; font-family: FontAwesome; font-size: 12px; padding: 1px 4px; margin-right: 5px; }
.btn-inquiry:hover { background: #666; box-shadow: 0 0 5px #333 inset; }
.btn-back {  display: inline-block; width: 75px; text-align: center; color: #fff; font-size: 15px; line-height: 15px; background: #4C4C4C; padding: 7px 20px; border-radius: 50px; }
.btn-back:before { content: '\f104'; font-family: FontAwesome; font-size: 12px; border-radius: 100%; border: 1px solid #fff; padding: 1px 4px; margin-right: 5px; }
.btn-back:hover { background: #666; box-shadow: 0 0 5px #333 inset; }
.btn-newsback { color: #fff; font-size: 15px; line-height: 15px; background: #D95225; padding: 7px 30px; border-radius: 50px; }
.btn-newsback:before { content: '\f104'; font-family: FontAwesome; font-size: 12px; border-radius: 100%; border: 1px solid #fff; padding: 1px 4px; margin-right: 8px; }
.btn-newsback:hover { background: #666; box-shadow: 0 0 5px #333 inset; }
.btn-pro-prev:before { content: url("../images/icon/prodLeft.png"); padding-right: 8px; }
.btn-pro-next:after { content: url("../images/icon/prodRight.png"); padding-left: 8px; }
.btn-add { color: #fff;  font-weight: 400; background-color: #0070c9;  background: linear-gradient(#42a1ec,#0070c9); border:solid 1px #07c ;}
.btn-add:hover {color: #fff;  background: #42a1ec;   background: linear-gradient(#0070c9,#42a1ec); box-shadow: 0px 1px 6px #42a1ec; }
.btn-border { background-color: transparent; border: 2px solid  #999; color: #999; font-weight: 500; }
.btn-border:before, .btn-border:after { content: ''; border-style: solid; border-color: #50a1ff; color: #50a1ff; position: absolute; z-index: 5; border-radius: 3px; box-sizing: content-box; }
.btn-border:before { width: 0; height: 100%; border-width: 2px 0 2px 0; top: -2px; left: 0; -webkit-transition-delay: 0.05s; transition-delay: 0.05s; }
.btn-border:after { width: 100%; height: 0; border-width: 0 2px 0 2px; top: 0; left: -2px; }
.btn-border:hover { color: #50a1ff; background-color: transparent; box-shadow: 0px 1px 6px #42a1ec;}
.btn-border:hover:before { width: 100%; }
.btn-border:hover:after { height: 100%; }




@media only screen and (max-width: 1024px) { 
.idx-about .wrap, .idx-products .wrap{ padding: 0 5%; }
}
@media only screen and (max-width: 992px) {
.half{  max-width:100%; display: block; }
.application-list li{ flex: 0 0 48%;  padding: 0;  margin-bottom: 30px; }
.application-list li.flex-2 {  flex-basis: 48%;  }
ul.news li { margin-bottom: 30px; }
}
@media only screen and (max-width: 767px) {
.banner { background: url(../images/banner/visual-bg-m.jpg) repeat-x center top; background-size: 150% auto;    }
  
.slides{width: 100%;  min-height:540px;   }
.visual-img { width: 100%; max-width: 80%; margin:60% auto auto auto;  }
.slogan {  width:90%; left:10%; margin:30% auto auto auto;  z-index: 99;   }  
}

@media only screen and (max-width: 480px) { 
  

  .slogan h1 { padding-top: 30px; }
  .slogan .fontBig { font-size: 30px; line-height: 30px; }
  .slogan .fontMin { font-size: 20px; line-height: 20px; }
  .slogan .fontSml { font-size: 12px; line-height: 12px; }
  .application-list li{ flex: 0 0 96%;margin-bottom: 10px; }
  .application-list li.flex-2 {  flex-basis: 96%;  }
    ul.news li .time{ width: 20%;font-size:16px;}
  ul.news li .content .title{ width: 65%; font-size:1rem; }

}
@media only screen and (max-width: 425px) { 
 .btn-submit, .btn-reset { padding: 10px 30px; } 
}
@media only screen and (max-width: 375px) { 
  .slogan .fontBig { font-size: 20px; line-height: 20px; }
  .slogan .fontMin { font-size: 16px; line-height: 16px; }
  .slogan .fontSml { font-size: 12px; line-height: 12px; }
  .title { font-size: 1.35rem;  }

}