/* CSS Document */

body {	-webkit-text-size-adjust:100%; font-family: 'Overpass', sans-serif; overflow-x: hidden; }
img {	border:0; }

/* Reset ================================================================================= */

a { text-decoration:none; 
-webkit-transition: all 0.4s ease-out 0s;
-moz-transition: all 0.4s ease-out 0s;
transition: all 0.4s ease-out 0s; }
a:hover { text-decoration:none; opacity: 0.7; }
a,a:hover, a:active, a:visited, a:focus {color: #ebab22;}
* { margin:0; padding:0; 
-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
-moz-box-sizing: border-box;    /* Firefox, other Gecko */
box-sizing: border-box;         /* Opera/IE 8+ */}

.content-Box { max-width:1200px; margin:0 auto; text-align:left; position:relative; clear:both;}

#content { font-size: 16px; line-height:24px; color: #333333; letter-spacing: 0.05rem; padding-top: 100px;}
#content p{ margin-bottom: 30px; font-size: 16px; line-height:24px; }


.banner { position: relative; overflow: hidden; height: 346px; background-size: cover;background-position: top center; background-repeat: no-repeat;}
.title01 { position: absolute; width: 100%; bottom: 0; left: 0; background: rgba(0,0,0,.6); padding: 10px 20px;}
.title01 h1 { font-size: 42px; font-weight: 900; color: #fff; line-height: 120%; margin: 0; text-transform: uppercase;}

#path { padding:6px 20px 6px 20px; text-align: left; color: #ffffff; background: #d1251a; overflow: hidden; line-height: 110%;}
#path ul { margin-bottom: 0;}
#path li { display: inline-block; vertical-align: top; font-size: 14px;}
#path li:after { content:"/"; display: inline-block; vertical-align: top; padding: 0 0 0 4px;}
#path li:last-child { pointer-events: none;}
#path li:last-child:after { display: none;}
#path li a { color: #ffffff;}
#path li a:hover, #path li:last-child a { color: #f6ff00;}

.main-content { background: #f2f2f2; padding: 50px 20px 0 20px;}

/*about*/
.seo-content { padding: 12px 0 12px 50px; position: relative; margin-bottom: 50px;}
.seo-content:before { content: ""; position: absolute; width: 10px; height: 100%; left: 0; top: 0; background: #d1251a; animation: line-bg ease-out 1.5s; animation-iteration-count: 1; transform-origin: 50% 0%;}
.seo-content p { margin-top: 0;}
@keyframes line-bg{
  0% {transform:scaleY(0);}
  100% {transform:scaleY(1) ;}
}

.about-pto { position: relative; margin-left: -20px; width: calc(100% + 40px); min-height: 602px;}
.parallax__container{clip:rect(0,auto,auto,0);height:100%;left:0;overflow:hidden;position:absolute;top:0;width:100%;z-index:10;}
.about-pto .parallax{background-position:top left !important;background-repeat:no-repeat;background-size:cover !important;position:fixed;top:0;-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0);-webkit-transform-style:preserve-3d;transform-style:preserve-3d;width:100%}

.about-section-2 { max-width: 960px; margin: -88px auto 0 auto; text-align:left; position: relative; z-index: 11;}
.about-section-pto { line-height: 0;}
.about-section-data { display: flex; flex-direction: row; flex-wrap: wrap; padding-bottom: 70px;}
.about-section-data > div { width: 25%; border-right:1px solid #d3d3d3; padding: 15px;}
.about-section-data > div:last-child { border-right:0px solid #d3d3d3;}
.about-section-data > div b { display: block; font-size: 25px; padding-bottom: 10px;}

/*products*/
.pro-section { display: flex; flex-direction: column; flex-wrap: nowrap; padding: 0 2%;}
.pro-section > div { background: #fff; width: 92%; display: flex; flex-direction: row; flex-wrap: wrap;}
.pro-section > div:nth-child(odd) { margin: 0 auto 70px 0;}
.pro-section > div:nth-child(even) { margin: 0 0 70px auto;}
.pro-section > div > div:nth-of-type(1) { width: 58%; position:relative; line-height: 0; overflow: hidden;}
.pro-section > div > div:nth-of-type(1) img { width: 100%; }
.pro-section > div > div:nth-of-type(2) { width: 42%; display: flex; flex-direction: column; flex-wrap: wrap; justify-content:center; align-items: center; padding:30px 4%;}
.pro-section > div:nth-child(even) > div:nth-of-type(1) { order: 2;}
.pro-section > div:nth-child(even) > div:nth-of-type(2) { order: 1;}
.pro-bg-1 { position: absolute; z-index: 2; top: 0; left: 0; width: 100%; height: 100%; background: rgba(255,255,255,1);}
.pro-bg-2 { background: rgba(255,255,255,.6);}

.title02 { text-align: center; font-weight: bold; font-size: 25px; color: #d1251a; padding-bottom: 10px;}
.btn01{ text-align: center;}
.btn01 a{ color: #d1251a; font-size: 14px; text-decoration: underline;}

/*products-list*/
.pro-list { display: flex; flex-direction: row; flex-wrap: wrap;}
.pro-list > div { width: 50%; padding: 0 3% 90px 3%;}
.pro-list-box { max-width: 405px; margin: 0 auto; background: #fff;}
.pro-list-pto { line-height: 0; overflow: hidden; position: relative;}
.pro-list-data { padding: 35px 30px;}
.pro-list-name { min-height: 55px; padding-bottom: 10px; font-size: 22px; font-weight: bold; color: #333;}
.pro-list-btn { position: relative; display: flex; flex-direction: row; flex-wrap: nowrap; justify-content:space-between; padding-bottom: 10px; width: 190px;}
.pro-list-btn:after { position: absolute; content: ""; bottom: 0; left: 0; width: 100%; height: 3px; background: #d1251a; animation: btn-line-out ease-in 0.5s; animation-iteration-count: 1; transform-origin: 0% 50%; }
.pro-list-btn:hover:after { animation: btn-line ease-out 0.5s; transform-origin: 100% 50%; animation-fill-mode:both;}
.pro-list-btn > div:nth-of-type(1) { font-size: 16px; color: #333;}
.pro-list-btn > div:nth-of-type(2) { width: 10px; height: 10px; border-width: 1px 1px 0 0; border-style: solid; border-color:#333; transform: rotate(45deg); margin: 5px 5px 0 0;}

@keyframes btn-line{
  0% {transform:scaleX(1);}
  100% {transform:scaleX(0) ;}
}
@keyframes btn-line-out{
  0% {transform:scaleX(0);}
  100% {transform:scaleX(1) ;}
}

/*products-detail*/
.pro-detail-section { position: relative; padding: 50px 20px; margin-bottom: 50px; margin-left: -20px; width: calc(100% + 40px);}
.pro-detail-section:after { position: absolute; content: ""; top: 0; left: 0; width: 76%; height: 100%; background: #d1251a; animation: btn-line-out ease-out 2s; animation-iteration-count: 1; transform-origin: 0% 50%; }
.pro-detail-top { display: flex;flex-direction: row; flex-wrap: wrap; position: relative; z-index: 2;}
.pro-detail-top > div { width: 50%;}
.pro-detail-top > div:nth-of-type(1) { padding: 20px 3%; color: #fff;}
.pro-detail-name { font-size: 25px; font-weight: bold; padding-bottom: 20px;}

.btn-box { display: flex; flex-direction:row; flex-wrap: wrap; margin-bottom: 20px;}
.btn-box > a { display: inline-block; width: 132px; line-height: 38px; text-align: center; color: #fff; font-size: 14px; margin:0 8px 8px 0; box-shadow: 0px 0px 0px 1px rgba(255,255,255,1);}
.btn-inquiry { background: #fff; color: #a60a00 !important;}
.social-tool { margin-bottom: 16px;}

.pro-b-box {display: flex; flex-direction:row; flex-wrap: nowrap;}
.pro-b-box > div:nth-of-type(1) { width: 14%;}
.pro-b-box > div:nth-of-type(2) { width: 86%; padding-left: 10px;}

.pro-b {line-height: 0; margin-bottom: 0px; background: #fff; }
.rslides_tabs { margin-top:0px; text-align:left; display:flex; flex-direction:row; flex-wrap:wrap; }
.pro-s { margin: 0;}
.pro-s li { margin:0 0 10px 0; line-height:0; width: 100%; list-style: none;}
.pro-s li a img { width:100%;  opacity: 0.3;}
.rslides_here { box-shadow: 0px 0px 0px 2px #ff5e5e;}
.rslides_here img { opacity: 1 !important;}
.rslides.rslides1 a img {float: none; width: auto!important; max-width: 100%!important; max-height: 100%!important;margin: 0 auto;}

.download-list { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: center; padding: 30px 0 20px 0;}
.download-list > a { display: inline-block; margin: 0 10px 20px 10px; text-align: center; max-width: 140px; color: #333;}
.download-list > a div { padding-top: 10px;}

.loop3 { padding-bottom: 0px;}
.loop3 .owl-dots { }
.loop3 .owl-stage-outer { padding: 20px 0;}
.loop3 .owl-item > div { text-align: center; }
.loop3 .owl-item img { box-shadow: 0px 0px 20px 0px rgba(0,0,0,0.3); }
.loop3 .owl-nav { position: absolute; top:calc(50% - 50px); width: 100%; z-index: 11;}
.loop3 .owl-prev, .loop3 .owl-next { position:absolute; z-index:100; top:calc(50% - 0px); background:none !important;}
.loop3 .owl-prev { left:10px; }
.loop3 .owl-next { right:10px;}
.loop3 .owl-prev:before, .loop3 .owl-next:before { font-family: 'Font Awesome 5 Free';font-weight: 900 !important;font-size:70px; color: #fff; opacity: 0.3;transition: all 0.4s ease-out 0s;}
.loop3 .owl-prev:before { content:"\f104"; }
.loop3 .owl-next:before { content:"\f105"; }
.loop3 .owl-prev:hover:before, .loop3 .owl-next:hover:before { opacity: 1;}
.loop3 .owl-stage-outer {z-index: 2;}
.loop3 .owl-dots { position: absolute; z-index: 100; bottom: -40px; width: 100%; text-align: center !important; padding: 0 50px;}
.loop3 .owl-dots .owl-dot span, .loop3  .owl-dots .owl-dot span { background: #cccccc !important; width: 14px !important; height: 14px !important;}
.loop3 .owl-dots .owl-dot.active span, .loop3  .owl-dots .owl-dot:hover span { background: #9d130a !important; }

.loop4 { padding-bottom: 0px;}
.loop4 .owl-dots { }
.loop4 .owl-stage-outer { padding: 20px 0;}
.loop4 .owl-item > div { text-align: center; }
.loop4 .owl-item img { box-shadow: 0px 0px 20px 0px rgba(0,0,0,0.3); }
.loop4 .owl-nav { position: absolute; top:calc(50% - 50px); width: 100%; z-index: 11;}
.loop4 .owl-prev, .loop3 .owl-next { position:absolute; z-index:100; top:calc(50% - 0px); background:none !important;}
.loop4 .owl-prev { left:10px; }
.loop4 .owl-next { right:10px;}
.loop4 .owl-prev:before, .loop3 .owl-next:before { font-family: 'Font Awesome 5 Free';font-weight: 900 !important;font-size:70px; color: #fff; opacity: 0.3;transition: all 0.4s ease-out 0s;}
.loop4 .owl-prev:before { content:"\f104"; }
.loop4 .owl-next:before { content:"\f105"; }
.loop4 .owl-prev:hover:before, .loop3 .owl-next:hover:before { opacity: 1;}
.loop4 .owl-stage-outer {z-index: 2;}
.loop4 .owl-dots { position: absolute; z-index: 100; bottom: -40px; width: 100%; text-align: center !important; padding: 0 50px;}
.loop4 .owl-dots .owl-dot span, .loop3  .owl-dots .owl-dot span { background: #cccccc !important; width: 14px !important; height: 14px !important;}
.loop4 .owl-dots .owl-dot.active span, .loop3  .owl-dots .owl-dot:hover span { background: #9d130a !important; }
.loop4 .owl-dots .owl-dot.active span, .loop3  .owl-dots .owl-dot:hover span { background: #9d130a !important; }


.btn-back { text-align: center; padding-bottom: 40px;}
.btn-back > a { display: inline-block; width: 132px; line-height: 38px; text-align: center; color: #333333; font-size: 14px; margin:0 8px 8px 0; box-shadow: 0px 0px 0px 1px #333333;}

@media only screen and (max-width:  1279px) {
	#content { padding-top: 50px;}
    
    .pro-section { padding: 0;}
    .pro-section > div { width: 100%;}
    
}
@media only screen and (max-width: 980px) {
    .banner { height: 200px;}
    .title01 h1 { font-size: 25px;}
    
    .main-content { padding-top: 30px;}
    
    .pro-section > div > div:nth-of-type(1) { width: 100%;}
    .pro-section > div > div:nth-of-type(2) { width: 100%; padding: 30px;}
    .pro-section > div:nth-child(even) > div:nth-of-type(1) { order: 1;}
    .pro-section > div:nth-child(even) > div:nth-of-type(2) { order: 2;}
    
    .pro-detail-section:after { width: 100%;}
    .pro-detail-top > div { width: 100%;}
    .pro-detail-top > div:nth-of-type(1) { order: 2; padding: 20px;}
    .pro-detail-top > div:nth-of-type(2) { order: 1; margin-bottom: 20px;}
}
@media only screen and (max-width: 768px) {
    .about-section-2  {margin-top: -50px;}
    .about-section-data > div { width: 100%; border-bottom:1px solid #d3d3d3; border-right:0px solid #d3d3d3;}

}
@media only screen and (max-width: 640px) {
	.pro-list > div { width: 100%; padding: 0 0 50px 0;}
}
@media only screen and (max-width: 570px) {
    
}

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

}

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

}

/*case*/
.case-list { display: flex; flex-direction: row; flex-wrap: wrap; padding-bottom: 0px;}
.case-list > div { width: calc(33.33% - 26px); margin: 0 13px 35px 13px; }
.case-list-pto { position: relative; width: 100%; height: 0; line-height: 0; padding-bottom: 100%; overflow: hidden; margin-bottom: 25px; }
.case-list-pto > a { position: absolute; top: 0; left: 0; right: 0; bottom: 0; font-size: 0; line-height: 0; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; }
.case-list-pto > a img {max-width: 100%!important; max-height: 100%!important; transition: all 0.4s ease-out 0s;}
.case-list-pto:hover img {transform: scale(1.05);}
.case-list-name { font-size: 18px; line-height: 28px;}
.case-list-name .case_show_txt {color: #000;}
.case-list-name .case_show_txt:first-child span{color: #bb1017;}
.case-list-name .case_show_txt span{color: #555;}
.gallery_btn {margin-top: 20px;}
.case-list-name .case_title { font-size: 24px; display: block; color: #bb1017; font-weight: bold;}
.case-list-name .case_txt {display: -webkit-box;
  height: 88px;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;}
#page {display: flex;justify-content: center;flex-wrap: wrap;}
/*case-detail*/
.case-detail { display: flex; flex-direction: row; flex-wrap: wrap; padding-bottom: 80px;}
.case-detail > div { width: 50%;}
.case-detail > div:nth-of-type(1) { padding: 0 38px;}
.case-detail > div:nth-of-type(2) { padding: 30px 0 0 45px;}
.rslides li > div { position: relative; width: 100%; height: 0; line-height: 0; padding-bottom: 100%; overflow: hidden;}
.rslides li > div > a { position: absolute; top: 0; left: 0; right: 0; bottom: 0; font-size: 0; line-height: 0; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; }

.responsive3 { padding:0 30px 15px 30px; margin-top: 15px; margin-bottom: 0px !important;}
.responsive3 .slick-slide img { display:inline-block;
    -webkit-transition: all 0.2s ease-out 0s;
    -moz-transition: all 0.2s ease-out 0s;
    transition: all 0.2s ease-out 0s;}
.responsive3 .slick-slide:hover img { opacity:0.6;}
.responsive3 .slick-slide { position:relative; text-align:center; margin:0 5px; border:1px solid #eeeeee; line-height:0;}
.responsive3 .slick-dots { text-align:center; display:none !important;}
.responsive3 .slick-dots li { width:auto; height:3px; overflow:hidden;}
.responsive3 .slick-dots li button { width:30px; height:3px; background:#fff; margin:0 2px;}
.responsive3 .slick-dots li button::before { content:""; display:none; }
.responsive3 .slick-dots li.slick-active button  { background:#de4609;}
/*.single-item .slick-prev, .single-item .slick-next { display:none !important;}*/
.responsive3 .slick-prev, .responsive3 .slick-next { width:auto; height:auto; top:35%;}
.responsive3 .slick-prev { left:-10px; top:calc(50% - 14px); width: 36px; height: 36px; border-radius:100%; border:0px solid #e4e4e5; background:none;}
.responsive3 .slick-prev::before { font-family: 'Font Awesome 5 Free'; content:"\f0d9"; font-size:40px; color:#333;font-weight: 900;}
.responsive3 .slick-next { right:-10px; top:calc(50% - 14px);width: 36px; height: 36px; border-radius:100%; border:0px solid #e4e4e5; background:none;}
.responsive3 .slick-next::before { font-family: 'Font Awesome 5 Free'; content:"\f0da"; font-size:40px; color:#333;font-weight: 900;}
.responsive3 .slick-prev:hover, .responsive3 .slick-prev:focus, .responsive3 .slick-next:hover, .responsive3 .slick-next:focus { background:none;}

.slider a:before { content:""; display:block; position:absolute; width:100%; height:100%; z-index:1;}

.equipment{display: flex;flex-wrap: wrap;}
.equipment .equip_list {width: 20%;text-align: center;
  margin-bottom: 30px;}
.equipment .equip_title{margin: 10px 5px 0;}
.btn02{
  display: block;
  width: 140px;
  line-height: 40px;
  text-align: center;
  font-size: 15px;
  position: relative;
  z-index: 4;
  font-family: 微軟正黑體, sans-serif;
  color: rgb(255, 255, 255) !important;
  border-radius: 20px;
  background: rgb(215, 34, 42);
  transition: all 0.3s ease 0s;
}
.btn02:hover{
  width: 160px;
  color: rgb(255, 255, 255);
}
.history_img {
	text-align: center;
}

.history p {
  padding-bottom: 0 !important;
}
.history {
  font-size: 16px;
  max-width: 1000px;
  margin: 0 auto;
  display: flex;
  flex-direction: column-reverse;
}
.history__outs__box {
  width: 100%;
  display: flex;
  margin-bottom: 15px;
  padding: 0 15px;
  padding: 10px;
}
.history__ins__year {
  width: 15%;
  display: flex;
  justify-content: center;
  align-items: baseline;
  margin-right: 15px;
}
.history__ins__year div{
  font-size: 20px;
  color: #000;
  font-weight: 600;
}
.history__ins__textbox{
  width: 85%;
}
.history__ins__mons{
  color: #e60012;
  padding: 0 0 15px;
}
.history__ins__mons:not(:first-child) {
  margin-top: 15px;
}
.history__serv__compy {
  max-width: 1000px;
  margin: 30px auto 0;
}

.faq_show {
  width: 100%;
  padding-bottom: 10px;
  border-bottom: 1px solid #CCC;
}
.faq_show td.title {
  color: #c05555;
  padding: 6px 0px 6px 30px;
  font-weight: 600;
  font-size: 24px;
}
.faq_show td.main {
  color: #555;
  padding: 20px 40px 20px 30px;
}
.strengh-title {
    font-weight: bold;
    font-size: 25px;
    padding: 20px;
}
.table-scroll{overflow-x:auto;}
.resp-tab-content table{margin-bottom: 20px;}
.resp-tab-content td{
	border: 1px solid #000;
}

.gallery_box{display: flex;flex-wrap: wrap;    padding-bottom: 30px;}
@media only screen and (max-width:1280px){
  .case-list-name .case_title {font-size: 20px;}
}
@media only screen and (max-width:980px){
  .case-detail > div {
    width: 100%;
}
.case-detail > div:nth-of-type(1) {
  padding: 0 0 38px 0px;
}
.case-detail > div:nth-of-type(2){padding: 0;}
}
@media only screen and (max-width:840px){
  .equipment .equip_list {padding: 0 10px;}
  .case-list > div{
    width: calc(50% - 26px);
  }
}
@media only screen and (max-width:600px){
  .case-list > div{
    width: 100%;
    margin: 0;
  }
  .history__outs__box {
    flex-direction: column;
    padding: 15px 10px;
  }
  .history__ins__year {
    margin: 0;
    justify-content: unset;
    width: 100%;
  }
  .history__ins__textbox{
    width: 100%;
    margin-top: 15px;
  }
  .strengh-icon{
    display:flex;
    justify-content:center;
  }
  .faq_show td.title{
    padding: 5px 15px;
  }
}
@media only screen and (max-width:500px){
  .equipment .equip_list {width: 50%;}
}
@media only screen and (min-width:601px){
  .case-list-name .case_title {
    min-height: 56px;
  }
}