/* CSS Document */

body {	-webkit-text-size-adjust:100%; font-family: 'Noto Sans TC', sans-serif; overflow-x: hidden; position: relative;}
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:1366px; width: 100%; margin:0 auto; text-align:left; position:relative; clear:both;}

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

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

.banner-box { position:relative;}
.banner-box-icon { position: absolute; z-index: 3; content: ""; background:url("../images/banner-icon.png") no-repeat; background-size: contain; width: 200px; height: 64px; left: 0; top: 50%; transform: translateY(-50%);}

.banner-section {width: calc(100% - 90px); margin: 0 0 0 auto; background: #013f7a;border: 15px solid transparent; display: flex; flex-direction: row; flex-wrap: nowrap; align-items: center; justify-content: flex-start; overflow: hidden; position: relative;min-height: 153px; padding-left: 120px; padding-right: 5%; padding-top: 15px; padding-bottom: 15px;}
.banner-section h1 { font-size: calc(30px + 0.5vw); color: #fff; font-weight: 700; margin: 0; padding: 0; line-height: 1.3; position: relative; z-index: 3; }
.banner-pc, .banner-mobile { position: absolute; z-index: 1; top: 0; right: 0; height: 100%;}
.banner-mobile { display: none;}
.banner-pc img, .banner-mobile img { object-fit: cover; width: 100%; height: 100%;}
.banner-section-img{border-image: linear-gradient(#eb271c, #2265c6) 30;
border-image-slice: 1;}

.main-box { padding: 15px 0 0 0; 
background-image: url("../images/main-bg-top.png"), url("../images/main-bg-bottom.png");
background-repeat: no-repeat, no-repeat;
background-position:top right, bottom left;
background-size: 60%, 60%;}

#path { text-align: left; padding-bottom: calc(10px + 2%); padding-left: 5%; padding-right: 5%; }
#path ul { margin: 0; padding: 0;}
#path li { display: inline-block; vertical-align: top; font-size: 15px; line-height: 26px; padding-right: 18px; position: relative;}
#path li:after { content:""; position: absolute; top:13px; right: 2px; width: 10px; height: 1px; background: #333;}
#path li:last-child { pointer-events: none;}
#path li:last-child:after { display: none;}
#path li a { color: #333; text-decoration: underline;}
#path li a:hover{ text-decoration: none;}
#path li:last-child a { color: #333;}

.demo-section { padding-left: 5%; padding-right: 5%;}

/*products*/
.products-section { display: flex; flex-direction: column; flex-wrap: wrap; padding-bottom: calc(20px + 5%);}
.products-section > div { display: flex; flex-direction: row; flex-wrap: wrap; margin-bottom: calc(20px + 2%); align-items: center; min-height: 445px;}
.products-section > div > div:nth-of-type(1) { width: 35%; position: relative; padding: 48px 3%;}
.products-section > div > div:nth-of-type(1):hover .products-pto img { transform: scale(0.9);}
.products-section > div > div:nth-of-type(1):hover .products-pto-bg:after { width: 325px; height: 190px; background: #ed2214;}
.products-section > div > div:nth-of-type(2) { width: 65%;position: relative; z-index: 4;}
.products-section > div:nth-child(even) > div:nth-of-type(1) { order: 2;}
.products-section > div:nth-child(even) > div:nth-of-type(2) { order: 1;}

.products-pto { padding-bottom: 88%; display: block; position: relative; z-index: 4;}
.products-pto img { transition: all 1.4s ease-out 0s;}
.products-pto-bg { position: absolute; z-index: 1; left: 15%; top: 0; width: 500px; height: 100%; overflow: hidden; clip-path: polygon(35% 0, 100% 0%, 65% 100%, 0 100%); background: #f6f6f6;}
.products-pto-bg:after { position: absolute; content: ""; transition: all 0.4s ease-out 0s; z-index: 2; left: 0; bottom: 0; width: 185px; height: 120px; clip-path: polygon(0% 0, 100% 100%, 0 100%); background: #013f7a;}

.products-title { margin-bottom: 15px;}
.products-title span { display:inline-block; line-height: 1.3; background: #013f7a; color: #fff; font-weight: 700; font-size: 24px; padding: 8px 38px 8px 24px;clip-path: polygon(0 0, calc(100% - 14px) 0%, 100% 100%, 0 100%); }

.btn01 { display: inline-block; line-height: 50px; position: relative; overflow: hidden; border: 1px solid #333333; padding: 0 48px 0 20px; color: #111; font-size: 17px; font-weight: 500; background: transparent;}
.btn01:hover { background: #d00101; color: #fff; border: 1px solid #d00101; padding: 0 20px;}
.btn01:hover > span { right: -20px;}
.btn01 > span { display: block; width: 20px; position: absolute; height: 8px; border-bottom: 1px solid #111; right: 18px; top:20px;transition: all 0.2s ease-out 0s;}
.btn01 > span:after { content: ""; position: absolute;  width: 1px; height: 12px; background: #111; right: -1px; bottom: 0px; transform-origin: 100% 100%; transform: rotate(-45deg);}


/*products-list*/
.products-list-section { display: flex; flex-direction: row; flex-wrap: wrap; padding-bottom: calc(20px + 5%);}
.products-list-section > div:nth-of-type(1) { width: 230px;}
.products-list-section > div:nth-of-type(2) { width: calc(100% - 230px); padding-left: 4%;}

.products-list { display: flex; flex-direction: row; flex-wrap: wrap; padding-bottom: 25px;}
.products-list > div { width: 33.33%; position: relative;}
.products-list > div:after { content: ""; position: absolute; left: 0; bottom: 0; background: #f6f6f6; width: 100%; height: 47%; z-index: -1;}
.products-list > div:nth-of-type(3n + 3) { border-right: 0px solid #cfcfcf;}

.idx-pro-box { border-right: 1px solid #cfcfcf; padding:25px 4% 35px 4%; }
.idx-pro-box:hover .idx-pro-pto img { transform: scale(0.9);}
.idx-pro-box:hover .idx-pro-title { color: #d00101 !important;}
.idx-pro-box:hover .idx-pro-btn:before { height: 30px;}
.idx-pro-box:hover .idx-pro-btn > span { color: #d00101 !important;}
.idx-pro-box:hover .idx-pro-btn > span:before, .idx-pro-box:hover .idx-pro-btn > span:after { width: 0px;}
.idx-pro-pto { padding-bottom: 80%; margin-bottom: 10px;display: block;}
.idx-pro-pto img { transition: all 1.4s ease-out 0s; max-width: 150px;}
.idx-pro-title { text-align: center; font-size: 22px; font-weight: 500; line-height: 1.3; padding-bottom: 35px; display: block;}
.idx-pro-title:hover { color: #d00101 !important;}
.idx-pro-btn { position: relative; text-align: center; display: block;}
.idx-pro-btn:before { position: absolute; content: ""; width: 1px; height: 0px; transform-origin: 50% 100%; background: #d00101; left: 50%; transform: translateX(-50%); bottom: 25px;transition: all 0.2s ease-out 0s;}
.idx-pro-btn:hover:before { height: 30px;}
.idx-pro-btn > span { display: inline-block; font-weight: 700; position: relative;}
.idx-pro-btn > span:hover { color: #d00101 !important;}
.idx-pro-btn > span:before, .idx-pro-btn > span:after { content: ""; position: absolute; width: 22px; height: 1px; background: #333; top:50%; transform: translateY(-50%);transition: all 0.2s ease-out 0s;}
.idx-pro-btn > span:hover:before, .idx-pro-btn:hover > span:after { width: 0px;}
.idx-pro-btn > span:before { transform-origin: 100% 50%; left: -28px;}
.idx-pro-btn > span:after { transform-origin: 0% 50%; right: -28px;}

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

/*products-detail*/
.main-box-pro { padding: 15px 0 0 0; 
background-image: url("../images/p-detail-bg-1.png"), url("../images/p-detail-bg-2.png"), url("../images/main-bg-top.png"), url("../images/main-bg-bottom.png");
background-repeat: no-repeat, no-repeat, no-repeat, no-repeat;
background-position:top left, 100% 60%, top right, bottom left;
background-size: 46%, 30%, 60%, 60%;}

.main-box-pro #path { padding-bottom: 15px;}
.main-box-pro .banner-box { margin-bottom: calc(20px + 2%);}
.main-box-pro h1 { font-size: calc(30px + 0.5vw); color: #111; font-weight: 700; margin: 0; padding: 0 0 0 220px; line-height: 1.3; position: relative; z-index: 3;}

.products-detail-top { display: flex; flex-direction: row; flex-wrap: wrap; padding-bottom: calc(20px + 2%);}
.products-detail-top > div:nth-of-type(1) { width: 45%; padding-right: 40px;}
.products-detail-top > div:nth-of-type(2) { width: 55%; padding-top: 35px;}

.loop { position: relative; padding: 0 5%; }
.loop .owl-dots { display: none;}
.loop .owl-item {position: relative; }
.loop .owl-item img { width: 80% !important; margin: 0 auto;}
.loop .owl-nav { position: absolute; top:calc(50% - 30px); left: 0; width: 100%; z-index: 11;}
.loop .owl-prev, .loop .owl-next { position:absolute; z-index:100; top:calc(50% - 0px); width: 44px !important; height: 44px !important; border-radius: 100% !important; background: #013f7a !important; border: 0px solid #fff !important;}
.loop .owl-prev { left:0px; }
.loop .owl-next { right:0px;}
.loop .owl-prev:before, .loop .owl-next:before { font-family: 'Font Awesome 5 Free';font-weight: 900 !important;font-size:70px; color: #fff; opacity: 1;transition: all 0.4s ease-out 0s;width: 12px; height: 12px; display: block; border-width: 1px 1px 0 0; border-style: solid; border-color: #fff; background-size: contain;}
.loop .owl-prev:before { content: ""; margin-left: 19px; transform: rotate(-135deg);}
.loop .owl-next:before { content: "";  margin-left: 13px; transform: rotate(45deg);}
.loop .owl-prev:hover:before, .loop .owl-next:hover:before { opacity: 1;}
.loop .owl-stage-outer {z-index: 2;}
.loop .owl-dots { position: absolute; z-index: 100; bottom:-60px; width: 100%; text-align: right !important; padding: 0 0px; }
.loop .owl-dots .owl-dot { border: 0px solid #c10000; background: transparent; margin-left: 6px;  margin-right: 6px; border-radius: 100%;}
.loop .owl-dots .owl-dot.active {  }
.loop .owl-dots .owl-dot span, .loop  .owl-dots .owl-dot span { background: #fff !important; width: 14px !important; height: 14px !important; margin: 0 auto!important;transition: all 0.4s ease-out 0s !important; opacity: 0.4;}
.loop .owl-dots .owl-dot.active span/*, .loop  .owl-dots .owl-dot:hover span*/ {  width: 50px !important; opacity: 1;}

.products-detail-title { color: #ed2214; font-weight: 100; font-size: calc(22px + 0.8vw); margin-bottom: 20px; line-height: 1.3;}
.products-detail-title:after { content: ""; display: inline-block; position: relative; margin: 0 16px; line-height: 1; top:-8px; width: 30px; height: 1px; background: #ed2214; }

.products-detail-btn-box { display: flex; flex-direction: column; flex-wrap: wrap; padding-top: 25px; border-top:1px solid #cccccc;}
.products-detail-btn-box > div { margin-bottom: 25px;}
.tool-btn-box { display: flex; flex-direction: row; flex-wrap: wrap;}
.tool-btn-box > a { display: flex; flex-direction: row; flex-wrap: nowrap; align-items: center; font-weight: 700; font-size: 15px; color: #222 !important;}
.tool-btn-box > a > img { width: 30px; display: inline-block; margin: 0 5px;}
.tool-btn-box > a.tool-btn-prev { margin-right: 13px;}
.tool-btn-box > a.tool-btn-next { margin-left: 13px;}


.btn02 { display: inline-block; position: relative; min-width: 170px; line-height: 46px; background: #013f7a; border-radius: 5px;text-align: center; overflow: hidden; padding: 0 20px; border-width: 0;	}
.btn02 img { display: inline-block; margin-right: 8px; height: 25px;}
.btn02 span { position: relative;display: inline-block;z-index: 2;letter-spacing: 0.1rem; font-size: 20px; color: #fff; font-weight: 500;}
.btn02:after { position: absolute; content: ""; width: 0%; height: 110%; top: 0; right: -15px; transition: all 0.4s ease-out 0s; background: #111; transform: skewX(-10deg);}
.btn02:hover:after { left: -15px;width: 140%;}
.btn02:hover span { color: #fff;}

.btn-downlaod {background: #1a66af;}

.social-tool { }

.btn-back { padding-bottom: calc(20px + 5%); padding-top: 30px; border-top:1px solid #cccccc; text-align: right;}

.title01 { position: relative; line-height: 1.3; padding: 14px 0 20px 0; font-weight: 700; font-size: 22px;  color: #111;}
.title01:before { position: absolute; content: ""; background: url("../images/banner-icon.png") no-repeat; top:0; left: 0; width: 25px; height: 8px; background-size: contain;}

.list-type-1 { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: space-between; margin-bottom: calc(10px + 2%);}
.list-type-1 > div { width: 48%; padding-left: 25px; margin-bottom: 5px; position:relative;}
.list-type-1-100 > div { width: 100%; }
.list-type-1 > div:before { content: ""; position: absolute; width: 12px; height: 12px; background: #ed2214; transform: rotate(45deg); left: 0; top: 11px;}

.align-center { text-align: center !important;}

.table-box { margin-bottom: calc(20px + 3%);}
.spec-type-1 { width: 100%;}
.spec-type-1 th, .spec-type-1 td { text-align: left; padding: 10px 5px; line-height: 1.3;}
.spec-type-1 th { font-size: 18px; font-weight: 700; border-bottom: 2px solid #013f7a; background-color: #013f7a;color: #fff;}
.spec-type-1 tbody td{ font-size: 18px; font-weight: 400; border-bottom: 1px solid #b1b1b1;}
.spec-type-1 tbody tr:nth-child(2n+2){ background: #f5f5f5;}

.layout-type-1, .layout-type-2 { display: flex; flex-direction: row; flex-wrap: wrap;justify-content: space-between; align-items: center;border-bottom:1px solid #b1b1b1; padding-bottom: calc(15px + 2%); margin-bottom: calc(15px + 2%);}
.layout-type-1 > div:nth-of-type(1) { width: 38%; text-align: center;}
.layout-type-1 > div:nth-of-type(2) { width: 62%; }
.layout-type-2 > div:nth-of-type(1) { width: 62%; }
.layout-type-2 > div:nth-of-type(2) { width: 38%; text-align: center; }

.title02 { position: relative; line-height: 1.3; padding: 14px 0 20px 0; }
.title02:before { position: absolute; content: ""; background: url("../images/banner-icon.png") no-repeat; top:0; left: 0; width: 25px; height: 8px; background-size: contain;}
.title02 h2, .title02 > div { font-weight: 700; font-size: calc(22px + 0.7vw);  color: #00528d; padding: 0; margin: 0; line-height: 1.3;}

/*application*/
.application-list { padding-bottom: calc(20px + 3%); display: flex; flex-direction: row; flex-wrap: wrap; justify-content: space-between;}
.application-list > a { width: calc(50% - 13px); margin-bottom: calc(15px + 2%); display: block;}
.application-list > a:hover .application-list-pto img { transform: scale(1.1);}
.application-list > a:hover .application-list-title:after { width: 100%;}
.application-list > a:hover .application-list-title > div { color: #fff;}
.application-list > a:hover .application-list-title > div > span { border-bottom: 1px solid #fff;}
.application-list > a:hover .application-list-title > div > span:after { background: #fff;}
.application-list-pto { padding-bottom: 70%;}
.application-list-pto img { transition: all 1.4s ease-out 0s;}
.application-list-title { max-width: 90%; margin:-30px auto 0 auto; position: relative; z-index: 3; padding: 35px 35px 20px 35px;}
.application-list-title > div { position: relative; z-index: 3; font-size: 24px; color: #333; font-weight: 700;transition: all 0.4s ease-out 0s;}
.application-list-title > div > span { display: inline-block; margin-left: 10px; position: relative; width: 30px;height: 8px; border-bottom: 1px solid #111;transition: all 0.2s ease-out 0s;}
.application-list-title > div > span:after { content: ""; position: absolute;  width: 1px; height: 12px; background: #111; right: -1px; bottom: 0px; transform-origin: 100% 100%; transform: rotate(-45deg);transition: all 0.2s ease-out 0s;}
.application-list-title:after { content: "";  position: absolute; left: 0; top: 0; width: 26px; height: 100%; background: #ed2214;transition: all 0.4s ease-out 0s;}

/*application-detail*/
.application-detail-section { display: flex; flex-direction: column; flex-wrap: wrap;}
.application-detail-section > div:nth-of-type(1) { margin-bottom: 15px;}
.application-detail-section .leftMenu > ul { display: flex; flex-flow: wrap;}
.application-detail-section .leftMenu > ul > li { width: 20%; margin-bottom: 1px; border-right: 1px solid #e9e9e9; display: flex; flex-flow: row; justify-content: center;}
.application-detail-section .leftMenu > ul > li a { width: 100%; display: flex; flex-flow: wrap; align-items: center; justify-content: center; letter-spacing: 0; font-size: 16px;}

.application-detail-content { padding-bottom: calc(20px + 3%); display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; margin: 30px 0 0 0;}
.application-detail-content > div {  width: 50%;}
.application-detail-content > div:nth-of-type(1) {  padding-left: 5%;}
.application-detail-content-box {  max-width: 683px; margin: 0 0 0 auto; padding-right: 5%; position: relative; z-index: 2;}
.application-detail-content-box-bg {  position: absolute; z-index: 1; top:50%; transform: translateY(-50%); right: -15%;box-shadow:inset 0px 0px 0px 50px rgba(233,233,233,0.6); width: 500px; height: 500px;}
.application-detail-content-data {  position: relative; z-index: 3;}

.application-related-section { position: relative; padding-top: 28px; padding-bottom: 40px;}
.application-related-section:before { position: absolute; content: ""; left: 0; top: 0; height: 100%; width: 90px; background: #ed2214;}

.loop2 { position: relative; padding: 0 3%; }
.loop2 .owl-dots { display: none;}
.loop2 .owl-item {position: relative; }
.loop2 .owl-item img { width: inherit !important; margin: 0 auto;}
.loop2 .owl-nav { position: absolute; top:calc(50% - 50px); left: 0; width: 100%; z-index: 11;}
.loop2 .owl-prev, .loop2 .owl-next { position:absolute; z-index:100; top:calc(50% - 0px); width: 44px !important; height: 44px !important; border-radius: 100% !important; background: #013f7a !important; border: 0px solid #fff !important;}
.loop2 .owl-prev { left:0px; }
.loop2 .owl-next { right:0px;}
.loop2 .owl-prev:before, .loop2 .owl-next:before { font-family: 'Font Awesome 5 Free';font-weight: 900 !important;font-size:70px; color: #fff; opacity: 1;transition: all 0.4s ease-out 0s;width: 12px; height: 12px; display: block; border-width: 1px 1px 0 0; border-style: solid; border-color: #fff; background-size: contain;}
.loop2 .owl-prev:before { content: ""; margin-left: 19px; transform: rotate(-135deg);}
.loop2 .owl-next:before { content: "";  margin-left: 13px; transform: rotate(45deg);}
.loop2 .owl-prev:hover:before, .loop2 .owl-next:hover:before { opacity: 1;}
.loop2 .owl-stage-outer {z-index: 2;}
.loop2 .owl-dots { position: absolute; z-index: 100; bottom:-60px; width: 100%; text-align: right !important; padding: 0 0px; }
.loop2 .owl-dots .owl-dot { border: 0px solid #c10000; background: transparent; margin-left: 6px;  margin-right: 6px; border-radius: 100%;}
.loop2 .owl-dots .owl-dot.active {  }
.loop2 .owl-dots .owl-dot span, .loop2  .owl-dots .owl-dot span { background: #fff !important; width: 14px !important; height: 14px !important; margin: 0 auto!important;transition: all 0.4s ease-out 0s !important; opacity: 0.4;}
.loop2 .owl-dots .owl-dot.active span/*, .loop2  .owl-dots .owl-dot:hover span*/ {  width: 50px !important; opacity: 1;}

.loop2 .idx-pro-box { border-width: 0;}

/*manufacture*/
.manufacture-section-1 { margin: 0 auto; padding-bottom: calc(20px + 2%); text-align: center; max-width: 1010px;}
.manufacture-section-1 .title02 { display: inline-block;}
.color-red { color: #ed2214;}
.manufacture-section-1-data { font-weight: 300; color: #013f7a; font-size: calc(20px + 0.4vw); line-height: 1.6;}

.manufacture-section-2 { display: flex; flex-direction: column; flex-wrap: nowrap;}
.manufacture-section-2 > div { display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; position: relative; border-top:50px solid #1a4488;}
.manufacture-section-2 > div:nth-child(odd) { border-left:50px solid #1a4488;}
.manufacture-section-2 > div:nth-child(even) { border-right:50px solid #1a4488;}
.manufacture-section-2 > div > div { width: 50%;}
.manufacture-section-2 > div:nth-child(even) > div:nth-of-type(1) { order: 2;}
.manufacture-section-2 > div:nth-child(even) .manufacture-section-2-data { padding: 20px 4% 20px 3%;}
.manufacture-section-2 > div:nth-child(even) > div:nth-of-type(2) { order: 1;}
.manufacture-section-2-data { padding: 40px 3% 20px 4%;}
.manufacture-section-2-pto { line-height: 0; height: 550px;}
.manufacture-section-2-pto img { object-fit: cover; width: 100%; height: 100%;}

/*material*/
.main-box-material { padding: 15px 0 0 0; 
background-image: url("../images/material-bg.png"), url("../images/main-bg-top.png"), url("../images/main-bg-bottom.png");
background-repeat: no-repeat, no-repeat, no-repeat;
background-position:0% 14%, top right, bottom left;
background-size:auto, 60%, 60%;}

.title03 { margin-bottom: 8px;}
.title03 > div { display: inline-block; min-width: 12px; color: #fff; padding: 8px 14px; font-weight: 700; font-size: 18px; border-radius: 15px 0 15px 0; background: #1a4488;}

.spec-type-2 { width: 100%; border-spacing: 1px; border-collapse: inherit; background: #ddd;}
.spec-type-2 th, .spec-type-1 td { text-align: left; padding: 10px 10px; line-height: 1.3;}
.spec-type-2 th { font-size: 18px; font-weight: 500; color: #fff; background: #1a4488;padding: 10px 10px;}
.spec-type-2 td { font-size: 18px; font-weight: 400; padding: 8px 10px;}
.spec-type-2 tr:nth-child(odd) { background: #e9eff8;}
.spec-type-2 tr:nth-child(even) { background: #fff;}

.bg-white { background: #fff !important;}

/*quality*/
.quality-pto { line-height: 0;}
.quality-content-section { position: relative; z-index: 3; max-width: 90%; margin: -190px auto calc(20px + 2.5%) auto; border: 50px solid rgba(233,233,233,.6); padding: 180px 28px 35px 28px; display: flex; flex-direction: row; flex-wrap: wrap; justify-content: space-between;}
.quality-content-section > div { width: 48.5%;}
.color-blue { color: #00528d;}

/*about*/
.main-box-about { padding: 15px 0 0 0; 
background-image: url("../images/material-bg.png"), url("../images/main-bg-top.png"), url("../images/main-bg-bottom.png");
background-repeat: no-repeat, no-repeat, no-repeat;
background-position:0% 100%, top right, bottom left;
background-size:auto, 60%, 60%;}

.about-section-1 { padding-bottom: calc(20px + 3%); display: flex; flex-direction: row; flex-wrap: wrap;}
.about-section-1 > div:nth-of-type(1) { width: calc(50% - 35px); padding-right: 5%; position: relative; z-index: 2; }
.about-section-1-bg { position: absolute; border: 50px solid rgba(233,233,233,.6); width: 500px; height: 500px; bottom: -5%; right: -15%;}
.about-section-1 > div:nth-of-type(2) { width: calc(50% + 35px);}
.about-section-1-content { position:relative; z-index: 3;}

.about-section-2 { padding-bottom: calc(20px + 3%); display: flex; flex-direction: row; flex-wrap: wrap; align-items: center;}
.about-section-2 > div:nth-of-type(1) { width: calc(50% + 140px); }
.about-section-2-bg { position: absolute; border: 50px solid rgba(233,233,233,.6); width: 500px; height: 500px; top: -30%; left: -20%;}
.about-section-2 > div:nth-of-type(2) { width: calc(50% - 140px);padding-left: 5%; position: relative; z-index: 2; }
.about-section-2-content { position:relative; z-index: 3;}

.about-bottom-section { padding-bottom: calc(20px + 3%); }
.about-bottom-section > div { display: flex; flex-direction: row; flex-wrap: wrap; padding: calc(20px + 3%) 0; border-bottom: 1px solid #cccccc;}
.about-bottom-section > div:last-child { border-bottom: 0px solid #cccccc;}
.about-bottom-section > div > div:nth-child(odd) { width: 185px;}
.about-bottom-section > div > div:nth-child(even) { width: calc(100% - 185px);}

.about-value-content { display: flex; flex-direction: row; flex-wrap: wrap;}
.about-value-content > div { width: 33.33%; padding: 0 4%; text-align: center; position: relative; font-size: 22px; font-weight: 500;}
.about-value-content > div:after { position: absolute; content: ""; width: 58px; height: 58px; background:url("../images/plus.svg") no-repeat; background-size: contain; top:22%; right: -5%;}
.about-value-content > div:last-child:after { display: none;}
.about-value-content-pto { line-height: 0; margin-bottom: 24px;}
.about-value-content-pto img { width: 160px;}

.about-content-2 { font-size: calc(18px + 0.35vw); font-weight: 300; line-height: 1.6; padding-top: 15px;}

.loop3 { position: relative; padding: 0 55px; }
.loop3 .owl-dots { display: none;}
.loop3 .owl-item {position: relative; }
.loop3 .owl-item img { width: inherit !important; margin: 0 auto;}
.loop3 .owl-nav { position: absolute; top:calc(40% - 50px); left: 0; width: 100%; z-index: 11;}
.loop3 .owl-prev, .loop3 .owl-next { position:absolute; z-index:100; top:calc(50% - 0px); width: 44px !important; height: 44px !important; border-radius: 100% !important; background: #0076e6 !important; border: 0px solid #fff !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:70px; color: #fff; opacity: 1;transition: all 0.4s ease-out 0s;width: 12px; height: 12px; display: block; border-width: 1px 1px 0 0; border-style: solid; border-color: #fff; background-size: contain;}
.loop3 .owl-prev:before { content: ""; margin-left: 19px; transform: rotate(-135deg);}
.loop3 .owl-next:before { content: "";  margin-left: 13px; transform: rotate(45deg);}
.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:-60px; width: 100%; text-align: right !important; padding: 0 0px; }
.loop3 .owl-dots .owl-dot { border: 0px solid #c10000; background: transparent; margin-left: 6px;  margin-right: 6px; border-radius: 100%;}
.loop3 .owl-dots .owl-dot.active {  }
.loop3 .owl-dots .owl-dot span, .loop3  .owl-dots .owl-dot span { background: #fff !important; width: 14px !important; height: 14px !important; margin: 0 auto!important;transition: all 0.4s ease-out 0s !important; opacity: 0.4;}
.loop3 .owl-dots .owl-dot.active span/*, .loop3  .owl-dots .owl-dot:hover span*/ {  width: 50px !important; opacity: 1;}


.about-year { position: relative; padding-bottom: 20px; margin-bottom: 20px; border-bottom: 2px solid #0076e6; color: #0076e6; font-size: calc(22px + 0.7vw); line-height: 1; font-family: "Russo One", sans-serif; font-weight: 400;}
.about-year:before { position: absolute; content: ""; width: 15px; height: 15px;background: #ed2214; left: 0; bottom: -7px;}

/*ESG*/
.ESG-section-1 { padding-bottom: 0;}

.ESG-section-2 { display: flex; flex-direction: row; flex-wrap: wrap; align-items: center;}
.ESG-section-2 > div {  width: 50%;}
.ESG-section-2 > div:nth-of-type(2) {  padding-right: 5%;}
.ESG-section-2-box {  max-width: 683px; margin: 0 auto 0 0; padding-left: 5%; position: relative; z-index: 2;}

.ESG-section-2-b { padding-bottom: calc(20px + 2%); position: relative; z-index: 3; margin-top: -50px;}
.ESG-section-2-b-content { border: 50px solid rgba(233,233,233,.6); padding: 0 50px;}
.ESG-section-2-b-data { padding: 25px 0; border-bottom: 1px solid #dadada; display: flex; flex-direction: row; flex-wrap: nowrap;}
.ESG-section-2-b-data > div:nth-of-type(1) { width: 70px;}
.ESG-section-2-b-data > div:nth-of-type(2) { width: calc(100% - 70px); padding-left: 10px;}
.ESG-section-2-b-title { font-size: 22px; padding-bottom: 4px; font-weight: 700;}

.no-border { border-width: 0 !important;}

/*world*/
.world-section { padding-bottom: calc(20px + 3%);}
.world-content { position: relative; padding: 315px 130px 110px 130px; font-weight: 300; text-align: center;font-size: calc(18px + 0.35vw); line-height: 1.8; color: #013f7a; margin-top: -265px;}
.world-content:after { position: absolute; content: ""; z-index: -1; left: 0; top: 0; width: 100%; height: 100%; border: 50px solid rgba(233,233,233,.6); }

/*news*/
.news-section-1 { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: space-between;}
.news-section-1 > div { width: calc(50% - 30px);}

.news-type-1 { padding-bottom: 50px;}
.news-type-1-pto { padding-bottom: 45%; box-shadow: 0px 0px 20px 0px rgba(0,0,0,0.08); margin-bottom: 15px; display:block;}
.news-type-title { padding-bottom: 10px;}
.news-type-title a { display: inline-block; font-size: 22px; font-weight: 700; color: #013f7a !important; border-bottom: 1px solid #013f7a; line-height: 1.4; padding-bottom: 7px;}
.news-type-data { display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;}
.news-type-2 { padding-bottom: 25px; margin-bottom: 25px; border-bottom: 1px solid #d6d6d6;display: flex; flex-direction: row; flex-wrap: wrap;}
.news-type-2 > div:nth-of-type(1) { width: 65%; padding-right: 4%;}
.news-type-2 > div:nth-of-type(2) { width: 35%; }
.news-type-2-pto { padding-bottom: 48%; display: block;box-shadow: 0px 0px 20px 0px rgba(0,0,0,0.08); background: #fff;}
.news-type-data-2 { min-height: 80px; font-size: 16px; line-height: 1.6;
	display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;}

/*news-detail*/
.news-detail-section { display: flex; flex-direction: row; flex-wrap: wrap; padding-bottom: 40px; align-items: flex-start; }
.news-detail-section > div:nth-of-type(1) { width: calc(100% - 350px); padding-right:6%; }
.news-detail-section > div:nth-of-type(2) { width: 350px;box-shadow: 0px 30px 30px 0px rgba(0,0,0,0.2); background: #013f7a; padding: 15px; }
.news-detail-section > div:nth-of-type(2) > div { background: #fff; padding: 30px 25px;  }
.news-detail-title { font-size: calc(18px + 0.8vw); color: #189a9a; font-weight: 500; padding: 0; margin: 0 0 15px 0; line-height: 1.5;}
.news-detail-date { font-size: 16px !important; color: #333 !important; font-weight: 400 !important;}

.news-detail-section h2{ font-weight: 700; font-size: 30px; color: #00528d; padding: 0; margin-bottom: 15px; line-height: 1.3;}
.news-detail-section .title02 h2, .title02 > div { font-size: calc(22px + 0.7vw); }
.news-detail-section h3{font-weight: 600; font-size: 24px; color: #333; padding: 0; margin-bottom: 15px; line-height: 1.3;}
.news-detail-section h4{ font-weight: 600; font-size: 20px; color: #00528d; padding: 0; margin-bottom: 15px; line-height: 1.3;}
.news-detail-section h5{ font-weight: 400; font-size: 20px; color: #333; padding: 0; line-height: 1.3;}
.news-detail-section h6{ font-weight: 600; font-size: 16px; color: #333; padding: 0; line-height: 1.3;}

.social-tool { text-align: left; padding-bottom: 30px;}
.news-detail-pto { padding-bottom: 25px;}

.blog-aside-title { margin-bottom: 20px; position: relative;}
.blog-aside-title span { font-size: calc(18px + 0.7vw); color: #333; line-height: 120%; padding: 0; margin: 0; font-weight: 700;}

.blog-aside {  }
.blog-aside > a { display: block; border-bottom: 1px solid #b9b9b9; padding: 0 0 14px; margin-bottom: 14px;color: #333 !important; font-weight: 400;}
.blog-aside > a:hover, .blog-aside > a.current { color: #ed2214 !important;}

/*contact*/
.contact-top-section { display: flex; flex-direction: row; flex-wrap: wrap; position: relative; margin-top: -15px;}
.contact-top-section-bg { position: absolute; z-index: 1; top:50%; left: 60%; transform: translate(-60%, -50%); width: 33%;}
.contact-top-section #path { padding-left: 0; padding-right: 0; padding-top: 15px;}
.contact-top-section > div:nth-of-type(1) { width: calc(50% + 75px); padding: 0 5% 30px 5%; position: relative; z-index: 4;}
.contact-top-section > div:nth-of-type(2) { width: calc(50% - 75px);}
.contact-top-section > div:nth-of-type(2) img  { object-fit: cover; width: 100%; height: 100%;}
.contact-title { font-size: calc(18px + 0.4vw); color: #013f7a;}
.contact-title span { color: #ed2214;}

.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: calc(16px + 0.3vw); border-width:0 0 1px 0; border-style: solid; border-color: #ebebeb; margin: 0px 0 0px 0; width: 100%; padding:5px 0 14px 0 ; color:#333; background: transparent; font-family: 'Noto Sans TC', sans-serif; line-height: 35px; border-radius: 0px; margin-bottom: 14px; }
.contact-form textarea { height:180px; resize:none; line-height: 140%;}
.contact-form select{ margin: 0 0 0px 0;  width:100%; max-width: 160px; /*background-image: url(../images/product-select.png);*/ background-repeat: no-repeat; background-position: calc(100% - 15px) 18px; background-size: 10px; -webkit-appearance: none; -moz-appearance: none; appearance: none;   background-color: transparent; font-size: calc(16px + 0.3vw); border-width:0 0 1px 0; border-style: solid; border-color: #999999; color:#333; font-family: 'Noto Sans TC', sans-serif;  padding:0px 35px 0px 15px;  line-height: 35px; border-radius: 0px;}
.contact-form option { padding:1px 5px;}
.contact-form select::-ms-expand {
    display: none;
}

.contact-map {line-height: 0; }
.contact-map iframe {line-height: 0; width: 100%; height: 500px; border-width: 0;}

.application_field{position: relative;padding-top: 28px;padding-bottom: 40px;}
.application_icon ul {display: flex;flex-wrap: wrap;padding: 0}
.application_icon ul li {display: flex;flex-direction: column;width: 273px;padding: 0 20px;line-height: 1;text-align: center;border-right: 1px solid #eee;margin: 20px 0;}
.application_icon ul li span{font-size: 18px;margin-top: 5px; letter-spacing: 0; line-height: 1.5;}
.application_icon ul li img{ width: 80px;margin: 0 auto;}

@media only screen and (max-width: 1365px) {
	#content { padding-top: 60px; font-size: 16px;  }
	#content p {font-size: 16px; }
	p, td, li, label {font-size: 16px; }
	
	.application-related-section:before { width: 40px;}
	
}
@media only screen and (max-width: 1279px) {
	.products-list-section > div:nth-of-type(1) { width: 100%;}
	.products-list-section > div:nth-of-type(2) { width: calc(100% - 0px); padding-left: 0%; padding-top: 15px;}
	
	.products-detail-top > div:nth-of-type(1) { width: 100%; padding-right: 0px;}
	.products-detail-top > div:nth-of-type(2) { width: 100%; padding-top: 25px;}
	
	.application-detail-section > div:nth-of-type(1) { margin-bottom: 10px;}
	.application-detail-section .leftMenu > ul > li { width: 100%; border-right: 0px solid #e9e9e9;}
	.application-detail-section .leftMenu > ul > li a { justify-content: flex-start;}
	
	.application-detail-content { padding-left: 5%; padding-right: 5%;}
	.application-detail-content > div { width: 100%;}
	.application-detail-content > div:nth-of-type(1) { order: 2; padding-left: 0;}
	.application-detail-content > div:nth-of-type(2) { order: 1; padding: 10px 0 25px 0;}
	.application-detail-content-box { max-width: 100%; padding-right: 0;}
	.application-detail-content-box-bg { display: none;}
	
	.title03 > div { font-size: 17px;}
	
	.about-section-1 > div { width: 100% !important;}
	.about-section-1 > div:nth-of-type(1) { order: 2; padding-right: 0;}
	.about-section-1 > div:nth-of-type(2) { order: 1; margin-bottom: 20px;}
	.about-section-1-bg { display: none;}
	
	.about-section-2 > div { width: 100% !important;}
	.about-section-2-bg { display: none;}
	.about-section-2 > div:nth-of-type(1) { margin-bottom: 20px;}
	.about-section-2 > div:nth-of-type(2) { padding-left: 0%; }
	
	.about-bottom-section > div > div:nth-child(odd) { width: 100%;}
	.about-bottom-section > div > div:nth-child(even) { width: calc(100% - 0px);}
	.about-value-content > div { font-size: 18px; line-height: 1.6;}
	.about-value-content > div:after { display: none;}
	.about-content-2 { padding-top: 0px;}
	
	.ESG-section-1 { padding-bottom: 30px;}
	.ESG-section-2-b-title { font-size: 20px;}
	
	.ESG-section-2 { padding-left: 5%; padding-right: 5%;}
	.ESG-section-2 > div {  width: 100%;}
	.ESG-section-2 > div:nth-of-type(1) { margin-bottom: 25px;}
	.ESG-section-2 > div:nth-of-type(2) { padding-right: 0%; padding-left: 0;}
	.ESG-section-2-box {  max-width: 100%;  padding-left: 0%; }
	
	.ESG-section-2-b { margin-top: 0px; padding-bottom: 0;}
	.ESG-section-2-b-content { border: 0px solid rgba(233,233,233,.6); padding: 20px 0;}
	
	.news-detail-section > div:nth-of-type(1) { width: calc(100% - 0px); padding-right: 0px; padding-bottom: 30px; }
	.news-detail-section > div:nth-of-type(2) { width: 100%; }
	.blog-aside-title span { font-size: 22px; }
	
	.loop .owl-item img { width: 80% !important; margin: 0 auto;}
}

@media only screen and (max-width: 980px) {
	.banner-pc { display:none;}
	.banner-mobile { display: block;}
	.banner-section {width: calc(100% - 0px); padding-left: 70px;}
	.banner-box-icon { width: 70px; height: 22px;}
	.banner-section h1 { font-size: calc(20px + 0.5vw); }
	
	.products-section > div { min-height:inherit;}
	.products-section > div > div:nth-of-type(1) { width: 100%; padding: 25px 0;}
	.products-section > div > div:nth-of-type(2) { width: 100%;}
	.products-title span { font-size: 19px }
	.products-pto { padding-bottom: 40%; }
	.products-pto-bg { display: none;}
	.products-section > div:nth-child(even) > div:nth-of-type(1) { order: 1;}
	.products-section > div:nth-child(even) > div:nth-of-type(2) { order: 2;}
	
	.idx-pro-title { font-size: 19px;}
	
	.main-box-pro h1  { font-size: calc(20px + 0.5vw); padding-left: 80px; }
	
	.btn02 { min-width: 120px;}
	.btn02 span { font-size: 16px;}
	
	.spec-type-1 th { font-size: 17px;}
	.spec-type-1 td { font-size: 16px;}
	
	.list-type-1 > div { width: 100%; }
	
	.layout-type-1 > div, .layout-type-2 > div { width: 100% !important;}
	.layout-type-2 > div:nth-of-type(1) { order: 2; }
	.layout-type-2 > div:nth-of-type(2) { order: 1; }
	
	.application-list-title > div { font-size: 19px;}
	
	.application-related-section:before { display: none;}
	
	.manufacture-section-2 > div > div { width: 100%;}
	.manufacture-section-2-pto { height: 400px;}
	.manufacture-section-2 > div:nth-child(odd) > div:nth-of-type(1) { order: 2;}
	.manufacture-section-2 > div:nth-child(odd) > div:nth-of-type(2) { order: 1;}
	.manufacture-section-2 > div { border-top:25px solid #1a4488;}
	.manufacture-section-2 > div:nth-child(odd) { border-left:25px solid #1a4488;}
	.manufacture-section-2 > div:nth-child(even) { border-right:25px solid #1a4488;}
	.manufacture-section-2-data { padding: 40px 5% 20px 5% !important;}
	
	.quality-content-section { max-width: 100%; margin: 30px auto calc(20px + 2.5%) auto; border: 0px solid rgba(233,233,233,.6); padding: 0px 0 0px 0; }
	
	.main-box-material { 
	background-image: url("../images/material-bg.png"), url("../images/main-bg-top.png"), url("../images/main-bg-bottom.png");
	background-repeat: no-repeat, no-repeat, no-repeat;
	background-position:0% 14%, top right, bottom left;
	background-size:50%, 60%, 60%;}
	
	.main-box-about { 
	background-image: url("../images/material-bg.png"), url("../images/main-bg-top.png"), url("../images/main-bg-bottom.png");
	background-repeat: no-repeat, no-repeat, no-repeat;
	background-position:0% 100%, top right, bottom left;
	background-size:50%, 60%, 60%;}
	
	.world-content { padding:250px 50px 60px 50px; margin-top: -265px;}
	.world-content:after { border: 25px solid rgba(233,233,233,.6); }
	
	.news-section-1 > div { width: 100%;}
}
@media only screen and (max-width: 768px) {
	.products-list > div { width: 50%; }
	.products-list > div:nth-child(odd) { border-right: 1px solid #cfcfcf;}
	.products-list > div:nth-child(even) { border-right: 0px solid #cfcfcf;}
	
	.application-list > a { width: 100%; }
	
	.contact-top-section > div:nth-of-type(1) { width: calc(100% + 0px);}
	.contact-top-section > div:nth-of-type(2) { width: calc(100% - 0px); display: none;}
	.contact-top-section-bg { display: none;}
	
	.application_icon ul li{width: 33%;}
	.application_icon ul li span { font-size: 15px;}
}
@media only screen and (max-width: 640px) {
	.quality-content-section > div { width: 100%;}
	.quality-content-section > div:nth-of-type(1) { padding-bottom: 30px;}
	
}
@media only screen and (max-width: 570px) {
	.about-value-content > div { width: 100%; padding: 0 0 25px 0;}
	
	.news-type-2 > div:nth-of-type(1) { width: 100%; padding-right: 0%; order: 2;}
	.news-type-2 > div:nth-of-type(2) { width: 100%; order: 1; margin-bottom: 15px;}
	
	.application_icon ul li{width: 50%;}
}

@media only screen and (max-width: 414px) {
	.products-list > div { width: 100%; }
	.products-list > div:nth-child(odd) { border-right: 0px solid #cfcfcf;}
	
	.manufacture-section-2-pto { height: 250px;}
	
	.application_icon ul li { width: 100%; border-right: 0; padding: 0;}
}

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

}