/* CSS Document */

body {	-webkit-text-size-adjust:100%; font-family: 'Microsoft JhengHei'; overflow-x: hidden; }
img {	border:0; }

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

a { text-decoration:none; transition: all 0.4s ease-out 0s; }
a:hover { text-decoration:none; }

* { box-sizing: border-box;}

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

#content { font-size: 17px; line-height:30px; color: #333; letter-spacing: 0.05rem; padding-top: 120px; font-weight: 400;}
#content p{ margin-bottom: 0px; margin-top: 0; padding-bottom: 40px; font-size: 17px;line-height:30px;  }
p, td, li, label { font-size: 17px;line-height:30px;  }

.photo-fit img { object-fit: cover; width: 100%; height: 100%; position: absolute; z-index: 1; left: 0; top: 0;}

.photo {line-height: 0; height: 0; padding-bottom: 40%; overflow: hidden; position: relative; z-index: 1; margin-bottom: 0px;}
.imgCenter {position: absolute; top: 0; left: 0; right: 0; bottom: 0; line-height: 0; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; z-index: 2;}
.imgCenter img {max-height: 100%;}

.video-box { padding-bottom: 45.7%;}

.banner-section { overflow: hidden; background: #0b1c4f;}
.banner { }
.banner-mobile { display: none;}

.idx-about-section { display: flex; flex-direction: row; flex-wrap: wrap; position: relative; height: 400px;}
.idx-about-section > div:nth-of-type(1) { position: absolute; width: 700px;  padding-right: 5%; padding-left: 5%;display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; top:0px; left: 0;height: calc(100% + 0px); background: #1a3178;clip-path: polygon(0% 0%, 100% 0%, 82% 100%, 0 100%); overflow: hidden;}
.idx-about-section > div:nth-of-type(2) { margin: 0 0 0 auto;}

.idx-about-content { position: relative; z-index: 3;}
.idx-about-content h1 { font-size: 40px; font-weight: 700; color: #fff; line-height: 120%; padding: 0 0 30px 0; margin: 0 0 30px 0; position: relative; display: block; width: 100%;}
.idx-about-content h1:after { content: ""; position: absolute; height: 3px; transform-origin: 0% 0%; background: #fff; left: 0; bottom: 0; animation-name: title-line; animation-duration: 2s; animation-fill-mode: forwards;}
@keyframes title-line {
  0%   {width: 0%; opacity: 0; }
  100% {width: 130%; opacity: 1; }
}

.main-bg { background: url("../images/content-bg.jpg") no-repeat top center; background-size: cover;}
.demo-section { padding-left: 5%; padding-right: 5%;}


#path { padding: 32px 0 40px 0;}
#path ul {margin:0; text-align: left; padding: 0; position: relative; z-index: 2; display: inline-block; }
#path li { display: inline-block; vertical-align: top; font-size: 17px; margin: 0; padding: 0; color: #333333; line-height: 110%; letter-spacing: 0; }
#path li:after { content:"/"; display: inline-block; vertical-align: top; padding: 0 6px 0 10px; color: #333333;}
#path li:last-child { pointer-events: none;}
#path li:last-child:after { display: none;}
#path li a { color: #333333; }
#path li a:hover, #path li:last-child a { color: #333333;}

/*about*/
.about-section-1 { display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; padding-bottom: 60px;}
.about-section-1 > div { padding-bottom: 40px;}
.about-section-1 > div:nth-of-type(1) { width: calc(50% - 120px); padding-right: 5%;}
.about-section-1 > div:nth-of-type(2) { width: calc(50% + 120px);}

.title01 { position: relative; margin-bottom: 25px; padding-left: 30px; padding-top: 20px; padding-bottom: 20px;}
.title01:before { position: absolute; content: ""; width: 45px; height: 100%; top: 0; left: 0; border-width: 8px 0 8px 8px; border-style: solid; border-color: #284395;}
.title01 span { position: relative; z-index: 3; font-size: 25px; color: #1a3178; font-weight: 700;}

.about-section-2 { display: flex; flex-direction: row; flex-wrap: wrap; padding-bottom: 60px;}
.about-section-2 > div { padding-bottom: 40px; width: 50%;}
.about-section-2 > div:nth-of-type(1) { padding-right: 5%;}
.about-section-2 > div:nth-of-type(2) { padding-top: 85px;}

.list-type-1 { margin: 0; padding: 0; list-style:none;}
.list-type-1 li { position: relative; padding: 7px 30px;font-size: 17px; font-weight: 700; color: #333; }
.list-type-1 li:nth-child(even) { background: #303030; color: #fff; }
.list-type-1 li:before { position: absolute; content: ""; left: 12px; top:20px; width: 7px; height: 7px; border-radius: 100%; background: #b41515;}

.list-type-1-2 { margin:0 0 30px 0;}
.list-type-1-2 li { font-weight: 400; padding-bottom: 0; }
.list-type-1-2 li:nth-child(even) { background: none; color: #333; }

/*products*/
.seo-content { padding-bottom: 40px;}

.products-section-bg { position: relative;}
.products-section-bg:before {content: ""; position: absolute; left: 0; top:80px; height: 70%; width: 92%; background: #bfbfbf;clip-path: polygon(0% 0%, 100% 0%, 92% 100%, 0 100%);}

.products-section {position: relative; z-index: 3; display: flex; flex-direction: row; flex-wrap: wrap; justify-content: center; padding-top: 36px;}
.products-section > a {position: relative; width: 33.33%; padding:0 23px 60px 23px;}
.products-section > a:hover img {transform: scale(1.05);}
.products-section > a:hover .products-name {background: #1152aa}
.products-pto {padding-bottom: 88%;box-shadow: 0px 0px 20px 0px rgba(0,0,0,0.4);}
.products-pto img {transition: all 0.4s ease-out 0s;}
.products-name {position: absolute; z-index: 3; left: 11px; top:-26px; background: #565656; height: 70px; width: 70%; padding: 18px 32px; color:#fff; font-size: 25px; font-weight: 700;clip-path: polygon(0% 0%, 100% 0%, 90% 100%, 0 100%);transition: all 0.4s ease-out 0s;}
.products-section > a:after {position: absolute; content: ""; z-index: 2; background: #888888; height:27px; width: 28px; clip-path: polygon(50% 0%, 100% 100%, 0 100%); top:-26px;left: calc(70% - 4px);}

/*products-list*/
.products-list2 {display: flex; flex-direction: row; flex-wrap: wrap; }
.products-list2 > div:hover .products-list2-pto:after { opacity: 1;clip-path: polygon(0% 0%, 100% 0%, 0 100%);}
.products-list2 > div { position: relative; width: 25%; padding: 0 20px 24px 20px;}
.products-list2-pto { padding-bottom: 83%;box-shadow: 10px 10px 20px 0px rgba(0,0,0,0.1); position: relative;}
.products-list2-pto:after { content: ""; position: absolute; z-index: 3; top: 0; left: 0; width: 44px; height: 44px; background: #c40000; clip-path: polygon(0% 0%, 0% 0%, 0 0%);opacity: 0; transition: all 0.4s ease-out 0s; }

.btn01 { border-radius: 10px;display: block; width: 120px; line-height: 40px; overflow: hidden; background: #1a3178; font-size: 15px; color: #fff !important; position: relative; text-align: center; margin-bottom: 30px; border-width: 0;}
.btn01:after { position: absolute; content: "";background: linear-gradient(-70deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.8) 50%, rgba(255,255,255,0) 100%); width: 100%; height: 100%; top:0; left: -100%;transition: all 0.4s ease-out 0s;}
.btn01:hover:after { left: 100%;}

.products-list-btn { padding-bottom: 50px;}
.products-list-btn .btn01 { margin: 0 0 0 auto;}

/*news*/
.news-list {display: flex; flex-direction: row; flex-wrap: wrap;}
.news-list > a {width: 33.33%; padding: 0 15px 40px 15px;}
.news-list > a:hover img {transform: scale(1.05);}
.news-list > a:hover .news-list-pto {box-shadow: 0px 0px 20px 0px rgba(0,0,0,0.5);}
.news-list > a:hover .news-list-over { opacity: 1;}
.news-list > a:hover .news-btn > div:nth-of-type(1) { color: #b41515;}
.news-list > a:hover .news-btn > div:nth-of-type(2) { background: #b41515;}
.news-list-pto {padding-bottom: 66.6%; position: relative; margin-bottom: 13px;box-shadow: 0px 0px 0px 0px rgba(0,0,0,0.5);transition: all 0.4s ease-out 0s;}
.news-list-pto img {transition: all 0.4s ease-out 0s;}
.news-list-over {position: absolute; z-index: 3; width: 100%; height: 100%; top: 0; left: 0;box-shadow:inset 0px 0px 0px 5px #fff;transition: all 0.4s ease-out 0s; opacity: 0; }
.news-date {padding-bottom: 12px; font-weight: 700; line-height: 100%;}
.news-date span {font-size: 20px; color: #1a3178; display: inline-block; padding-right: 6px;}
.news-title {font-weight: 700;}
.news-data { font-size: 15px; height:68px; margin-bottom: 12px;
	 display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;}
.news-btn {display: flex; flex-direction: row; flex-wrap: nowrap; align-items: center;}
.news-btn > div:nth-of-type(1) { white-space: nowrap; padding-right: 10px; font-size: 15px; font-weight: 700;}
.news-btn > div:nth-of-type(2) { width: 100%; height: 1px ;background: #e8e8e8;}

.page { text-align: center; padding:0 0 50px 0;}
.page a { font-size: 15px; color: #000; font-weight: 500; width: 30px; height: 30px; line-height: 30px; text-align: center; border-radius: 100%; display: inline-block;}
.page a:hover, .page a.current { background: #b41515; color: #fff;}
.page-prev, .page-next { width: 12px !important; height: 12px !important; line-height: inherit !important; border-radius: 0 !important; border-top:1px solid #000; border-right: 1px solid #000; margin: 0 20px;}
.page-prev:hover, .page-next:hover { background: none !important;}
.page-prev { transform: rotate(-135deg);}
.page-next { transform: rotate(45deg);}

/*Contact Us*/
.contact-section { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: space-between; padding-bottom: 60px;}
.contact-section > div:nth-of-type(1) { width: 30%;}
.contact-company-name { color: #226f37; font-size: 26px; font-weight: 500 !important; line-height: 110%; padding-bottom: 20px;}
.contact-section > div:nth-of-type(2) { width: 66%;}
.contact-info { display: flex; flex-direction: row; flex-wrap: wrap; margin-bottom: 20px;}
.contact-info > div { padding-bottom: 15px;}
.contact-info > div:nth-child(odd) { width: 20px;}
.contact-info > div:nth-child(even) { width: calc(100% - 20px); padding-left: 10px;}
.contact-info > div:nth-child(even) a { color: #333;}

.contact-form {display: flex; flex-direction: row; flex-wrap: wrap;  justify-content: space-between; margin-bottom: 0px;}
.contact-form > div { width: 48.5%; margin-bottom: 18px; padding-bottom: 10px; border: 1px solid #d6d6d6; padding-top: 10px; display: flex; flex-direction: row; flex-wrap: nowrap; background: #fff; }
.contact-form > div > div:nth-of-type(1) { width: 120px; padding: 0px 10px; border-right: 1px solid #d9d9d9; font-weight: 400; position: relative; padding-left: 30px; line-height: 180%; font-size: 16px;}
.contact-form > div > div:nth-of-type(1) span { position: absolute; left: 10px; top:-1px; color: #e6000c;}
.contact-form > div > div:nth-of-type(2) { width: calc(100% - 120px);}
.input-50 { display: flex; flex-direction: row; flex-wrap: nowrap; }
.input-50 > div { width: 50%; }
.input-50 > div:nth-of-type(1) { border-right: 1px solid #d9d9d9;  }
.contact-form input[type="text"], .contact-form input[type="number"], .contact-form input[type="tel"], .contact-form input[type="phone"], .contact-form input[type="date"], .contact-form input[type="email"], .contact-form input[type="password"], .contact-form input[type="button"], .contact-form textarea { font-size: 16px; border-width:0px; border-style: solid; border-color: #e2e2e2; margin: 0px 0 0px 0; width: 100%; padding: 0px 15px; color:#333; background: #fff; font-family: 'Microsoft JhengHei'; line-height: 30px; border-radius: 5px; }
.contact-form textarea { height:240px; padding:10px 15px; resize:none; line-height: 120%;}
.contact-form select{ margin: 0 0 0px 0;  width:100%; background-image: url(../images/product-select.png); background-repeat: no-repeat; background-position: calc(100% - 10px) 6px; -webkit-appearance: none; -moz-appearance: none; appearance: none;   background-color: #fff; font-size: 16px; border-width:0px; border-style: solid; border-color: #e2e2e2; color:#333; font-family: 'Microsoft JhengHei';  padding:0px 35px 0 15px;  line-height: 100%; border-radius: 5px;}
.contact-form option { padding:1px 5px;}
.contact-form select::-ms-expand {
    display: none;
}
.width-100 { width: 100% !important;}

.contact-btn-box { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: space-between; align-items: center; padding: 0px 0 0px 0;}
.contact-btn-box > div { padding: 0 0px 20px 0px;}

.map iframe { width: 100%; border-width: 0; height: 465px;}

.contact-section .btn01 { margin-bottom: 0;}

/*qulaity*/
.qulait-list { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: space-between; padding-bottom: 30px;}
.qulait-list > div { margin-bottom: 20px; width: 48%;}

.qulait-3d { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: center; padding-bottom: 30px;}
.qulait-3d > div { margin-bottom: 20px; text-align: center;}
.qulait-3d > div img { max-width: 440px; width: 100%;}

.loop2 { max-width: 600px; margin: 0 auto; padding-bottom: 50px; padding-left: 30px; padding-right: 30px;}
.loop2 .owl-dots { }
.loop2 .owl-item {position: relative; }
.loop2 .owl-nav { position: absolute; top:40%; left: 0; width: 100%; z-index: 11;}
.loop2 .owl-prev, .loop2 .owl-next { position:absolute; z-index:100; width: 30px !important; height: 30px !important; border: 1px solid #131e56 !important; border-radius: 100% !important;background: rgba(255,255,255,0) !important;}
.loop2 .owl-prev { left:-10px; }
.loop2 .owl-next { right:-10px;}
.loop2 .owl-prev:before, .loop2 .owl-next:before { font-family: 'Font Awesome 5 Free';font-weight: 900 !important;font-size:20px; color: #131e56; transition: all 0.4s ease-out 0s;width: 15px; height: 15px; background-size: contain; display: block; border-width: 0 0; border-style: solid; border-color: #fff; margin: 0 auto; position: relative; line-height: 80%; text-align: center;}
.loop2 .owl-prev:before { content: "\f0d9"; left: -2px;  }
.loop2 .owl-next:before { content: "\f0da"; right: -2px;  }
.loop2 .owl-prev:hover, .loop2 .owl-next:hover { opacity: 0.5;}
.loop2 .owl-stage-outer {z-index: 2;}
.loop2 .owl-dots { position: absolute; z-index: 100; bottom:10px; right: 0; width: 100%;  text-align: center !important;  }
.loop2 .owl-dots .owl-dot { width: 14px; height: 14px;  text-align: center; margin: 0 3px;}
.loop2 .owl-dots .owl-dot span { background: #fff !important; width: 9px !important; height: 9px !important; margin: 0 !important;}
.loop2 .owl-dots .owl-dot.active span, .loop  .owl-dots .owl-dot:hover span { background: #b41515 !important; }

.qulaity-list-dot .owl-nav { top:calc(40% + 35px);}
.qulaity-list-dot .owl-dots { bottom: -30px;}

/*device*/
.device-table-box { padding: 3px; background: linear-gradient(90deg, #690d0d 0%, #1a3178 100%);}
.device-table { border-spacing: 1px; border-collapse: inherit; width: 100%;}
.device-table th, .device-table td { padding:2px 5px;}
.device-table th { background: #666; color: #fff; text-align: center; font-weight: 500; font-size: 17px;}
.device-table td { background: #fff; color: #333; text-align: center; font-weight: 400; font-size: 16px;}

.device-txt { text-align: center; padding-top: 10px;}

.loop3 {  padding-bottom: 180px;}
.loop3 .owl-dots { display: none;}
.loop3 .owl-item {position: relative; }
.loop3 .owl-nav { position: absolute; bottom: 140px; right: 3%; width: 160px; z-index: 11;}
.loop3 .owl-prev, .loop3 .owl-next { position:absolute; z-index:100; background:none !important; width: 68px !important; height: 68px !important; border: 1px solid #131e56 !important; border-radius: 100% !important;}
.loop3 .owl-prev { left:0px; }
.loop3 .owl-next { right:0px;}
.loop3 .owl-prev:before, .loop3 .owl-next:before { font-family: 'Font Awesome 5 Free';font-weight: 900 !important;font-size:40px; color: #131e56; transition: all 0.4s ease-out 0s;width: 35px; height: 35px; background-size: contain; display: block; border-width: 0 0; border-style: solid; border-color: #fff; margin: 0 auto; position: relative;}
.loop3 .owl-prev:before { content: "\f0d9"; left: -4px;  }
.loop3 .owl-next:before { content: "\f0da"; right: -4px;  }
.loop3 .owl-prev:hover, .loop3 .owl-next:hover { opacity: 0.5;}
.loop3 .owl-stage-outer {z-index: 2;}
.loop3 .owl-dots { position: absolute; z-index: 100; bottom: -70px; width: 100%; text-align: center !important; padding: 0 50px; }
.loop3 .owl-dots .owl-dot span, .loop3  .owl-dots .owl-dot span { background: rgba(255,255,255,.5) !important; width: 14px !important; height: 14px !important;}
.loop3 .owl-dots .owl-dot.active span, .loop3  .owl-dots .owl-dot:hover span { background: #ad0d19 !important; }

.loop4 {  padding-bottom: 180px;}
.loop4 .owl-dots { display: none;}
.loop4 .owl-item {position: relative; }
.loop4 .owl-nav { position: absolute; bottom: 155px; right: 3%; width: 160px; z-index: 11;}
.loop4 .owl-prev, .loop4 .owl-next { position:absolute; z-index:100; background:none !important; width: 68px !important; height: 68px !important; border: 1px solid #131e56 !important; border-radius: 100% !important;}
.loop4 .owl-prev { left:0px; }
.loop4 .owl-next { right:0px;}
.loop4 .owl-prev:before, .loop4 .owl-next:before { font-family: 'Font Awesome 5 Free';font-weight: 900 !important;font-size:40px; color: #131e56; transition: all 0.4s ease-out 0s;width: 35px; height: 35px; background-size: contain; display: block; border-width: 0 0; border-style: solid; border-color: #fff; margin: 0 auto; position: relative;}
.loop4 .owl-prev:before { content: "\f0d9"; left: -4px;  }
.loop4 .owl-next:before { content: "\f0da"; right: -4px;  }
.loop4 .owl-prev:hover, .loop4 .owl-next:hover { opacity: 0.5;}
.loop4 .owl-stage-outer {z-index: 2;}
.loop4 .owl-dots { position: absolute; z-index: 100; bottom: -70px; width: 100%; text-align: center !important; padding: 0 50px; }
.loop4 .owl-dots .owl-dot span, .loop4  .owl-dots .owl-dot span { background: rgba(255,255,255,.5) !important; width: 14px !important; height: 14px !important;}
.loop4 .owl-dots .owl-dot.active span, .loop4  .owl-dots .owl-dot:hover span { background: #ad0d19 !important; }


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

@media only screen and (max-width: 1279px) {
	#content { padding-top: 60px; font-size: 16px;}
	#content p{ font-size: 16px;  }
	p, td, li, label { font-size: 16px;  }
	
	.banner { display: none}
	.banner-mobile { display: block;}
	
	
	
	.idx-about-section { height: auto;}
	.idx-about-section > div { width: 100% !important;}
	.idx-about-section > div:nth-of-type(1) { order: 2; position: inherit; width: 100%;  padding: 20px 5%;top:auto; left: auto;clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0 100%);}
	.idx-about-section > div:nth-of-type(2) img { order: 1; width: 100%;}
	.idx-about-content h1 { font-size: 24px; padding-bottom: 20px; margin-bottom: 0px;}
	
	#path { padding: 20px 0 10px 0;}
	#path li { font-size: 15px;}
	
	.products-name { font-size:20px; padding: 18px;}
	
	.loop3 .owl-nav { transform: scale(0.7);}
	.loop3{ padding-bottom: 100px;}
	.loop3 .owl-nav{ bottom: 85px;}
}

@media only screen and (max-width: 980px) {
	
	.about-section-1 { padding-bottom: 20px;}
	.about-section-1 > div:nth-of-type(1) { width: calc(100% - 0px); padding-right: 0%;}
	.about-section-1 > div:nth-of-type(2) { width: calc(100% + 0px); text-align: center;}

	.about-section-2 > div { padding-bottom: 20px; width: 100%;}
	.about-section-2 > div:nth-of-type(1) { padding-right:0%; text-align: center; order: 2;}
	.about-section-2 > div:nth-of-type(2) { padding-top: 0px; order: 1;}
	
	
	.products-section > a { width: 50%; padding:0 15px 40px 15px;}
	
	.products-list2 > div { width: 33.33%; padding: 0 12px 24px 12px;}
	
	.news-list > a {width: 50%; padding: 0 5px 30px 5px;}
	
	.contact-form > div { width: 100%; }
    .contact-section > div:nth-of-type(1) { width: 100%; padding-bottom: 25px;}
    .contact-section > div:nth-of-type(2) { width: 100%;}
	
	.qulait-list > div { width: 100%;}
}
@media only screen and (max-width: 768px) {
	
}
@media only screen and (max-width: 640px) {
	.products-list2 > div { width: 50%; }
	
}
@media only screen and (max-width: 570px) {
	.products-section > a {width: 100%; padding:0 0px 40px 0px;}
	
}

@media only screen and (max-width: 414px) {
	.idx-about-content h1 { font-size: 20px;}
	
	.title01 span { font-size: 20px;}
}

@media only screen and (max-width: 320px) {
	.news-list > a {width: 100%; padding: 0 0px 30px 0px;}
	

}