@charset "utf-8";
/* CSS Document */
.sub_banner {line-height: 0; font-size: 0;}

.main {position: relative; background: url("../images/bg_04.jpg") no-repeat bottom center; min-height: 700px; padding: 87px 0;}
.mainT {max-width:1410px; margin: 0 auto 60px auto; padding: 0 20px; display: flex; flex-wrap: wrap; justify-content: center;}
.mainT h1 {color: #003f8e; text-align: center; display: flex; flex-direction: column;}
.mainT h1::after {content: ''; height: 2px; width: 100%; background-color: #9db4e2; margin: auto; margin-top: 5px;}
.mainT p {padding: 30px 0 0 0; line-height: 145%; color: #3d3d3d; letter-spacing: 0.2px; width: 100%;}

.title_a {color: #003f8e; text-align: center; font-family: 'Noto Sans TC', sans-serif; display: flex; flex-wrap: wrap; justify-content: center;}
.title_a h2, .title_a h3 {font-weight: 400; position: relative;}
.title_a h2::before, .title_a h3::before {content: ''; height: 4px; width: 47px; background-color: #9db4e2; position: absolute; left: -57px; top: 50%; margin-top: -2px; }
.title_a h2::after, .title_a h3::after {content: ''; height: 4px; width: 47px; background-color: #9db4e2; position: absolute; right: -57px; top: 50%; margin-top: -2px; }

.path {padding: 45px 20px 5px 20px!important; max-width: 1410px; margin: auto!important; display: flex; flex-wrap: wrap; line-height: 175%;}
.path > li {color: #003f8e;}
.path > li::after {content: '/'; padding: 0 10px; font-family:'PMingLiU'; color: #585858;}
.path > li:last-child::after {content: none;}
.path > li a:link, .path > li a:visited {text-decoration:none; color: #585858; position: relative; transition: all 0.5s ease 0s;}
.path > li a:active, .path > li a:hover {text-decoration:none; color:#ce000d; cursor:pointer; transition: all 0.5s ease 0s;}
.path > li a::after {content: ''; position: absolute; bottom: -4px; left: 50%; height: 2px; width: 0; background-color: #ce000d; transition: all 0.75s ease 0s;}
.path > li a:hover::after {content: ''; position: absolute; bottom: -4px; left: 0%; height: 2px; width: 100%; background-color: #ce000d; transition: all 0.25s ease 0s;}


.about {max-width:1410px; margin:auto; padding: 0 20px 20px 20px; height: 100%; color: #010101;}
.aboutA {display: flex; flex-wrap: wrap; background-color: #f2f2f2; margin-bottom: 100px;}
.aboutA > div:nth-child(1) {width: 47.4%; overflow: hidden; position: relative;}
.aboutA > div:nth-child(1) img {position: absolute; top: 0; left: 0; height: 100%!important; max-width: none!important;}
.aboutA > div:nth-child(2) {width: 52.6%; padding: 45px;}
.aboutA > div:nth-child(2) p {line-height: 145%;}
.aboutB {display: flex; flex-wrap: wrap;}
.aboutB div:nth-child(1) {width: 50%; display: flex; flex-wrap: wrap; justify-content: center; padding: 0 0 0 20px;}
.aboutB div:nth-child(2) {width: 50%; display: flex; flex-wrap: wrap; justify-content: center; padding: 0 20px 0 0;}


.products {display: flex; flex-wrap: wrap;}
.products > div {width: 33.33%; display: flex; flex-direction: column;}
.products > div:nth-child(2), .products > div:nth-child(5), .products > div:nth-child(8), .products > div:nth-child(11), .products > div:nth-child(14), .products > div:nth-child(17), .products > div:nth-child(20) {flex-direction: column-reverse;}
.productsA {position: relative; width: 100%; height: 0; padding-bottom: 100%; background-color: #e1ebf9; z-index: 1;}
.productsA::before {content: ''; position: absolute; height: 0; width: 0; top: auto; left: 50%; bottom: -20px; margin-left: -20px; border: 20px solid transparent; border-bottom: 0; border-top-color: #e1ebf9; z-index: 99;}
.products > div:nth-child(2) .productsA::before, .products > div:nth-child(5) .productsA::before, .products > div:nth-child(8) .productsA::before, .products > div:nth-child(11) .productsA::before, .products > div:nth-child(14) .productsA::before, .products > div:nth-child(17) .productsA::before, .products > div:nth-child(20) .productsA::before {content: ''; position: absolute; height: 0; width: 0; top: -20px; left: 50%; bottom: auto; margin-left: -20px; border: 20px solid transparent; border-top: 0; border-bottom-color: #e1ebf9; z-index: 99;}
.productsA > div {position: absolute; top: 20px; left: 20px; right: 20px; bottom: 20px; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; overflow: auto;}
.productsAC {max-width: 365px;}
.productsAC h3 {font-weight: bold; color: #585858; margin-bottom: 13px;}
.productsAC h3::first-letter {font-size: 26px; color: #003f8e;}
.productsAC p {color: #585858; line-height: 174%; margin-bottom: 13px; max-height: 345px; overflow: auto;}
.productsAC a:link, .productsAC a:visited {text-decoration:none; color:#003f8e; display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; float: right; transition: all 0.5s ease 0s;}
.productsAC a:active, .productsAC a:hover {text-decoration:none; color:#db4e4d; font-weight: bold; cursor:pointer; transition: all 0.5s ease 0s;}
.productsAC a::before {content: ''; width: 44px; height: 13px; line-height: 0; font-size: 0; background: url("../images/icon_04a.png") no-repeat center; background-size: cover; margin-right: 10px; transition: all 0.5s ease 0s;}
.productsAC a:hover::before {content: ''; width: 44px; height: 13px; line-height: 0; font-size: 0; background: url("../images/icon_04b.png") no-repeat center; background-size: cover; margin-right: 3px; transition: all 0.25s ease 0s;}
.productsB {line-height: 0; font-size: 0; position: relative; width: 100%; height: 0; padding-bottom: 100%; background-color: #fff;}
.productsB div {position: absolute; top: 0; left: 0; right: 0; bottom: 0; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; text-align: center; overflow: hidden;}
.products > div img {transform: scale(1.0, 1.0); transition: all 0.5s ease 0s;}
.products > div:hover img {transform: scale(1.3, 1.3); transition: all 0.25s ease 0s;}
.productsC {display: flex; flex-wrap: wrap; padding-bottom: 30px; margin-bottom: 10px;}
.productsC > div:nth-child(1) {position: relative; width: 49.198%; height: 0; padding-bottom: 30.293%; overflow: hidden; box-shadow: 0 0 13px rgba(0, 0, 0, 0); transition: all 0.5s ease 0s;}
.productsC > div:nth-child(1) > div {position: absolute; top: 0; right: 0; bottom: 0; left: 0; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; line-height: 0; font-size: 0; overflow: hidden;}
.productsC > div:nth-child(1) > a {position: absolute; top: 0; right: 0; bottom: 0; left: 0; font-size: 0; line-height: 0; z-index: 5;}
.productsC > div:nth-child(1) > div img {transform: scale(1.0, 1.0); transition: all 0.5s ease 0s;}
.productsC > div:nth-child(1):hover > div img {transform: scale(1.3, 1.3); transition: all 0.25s ease 0s;}
.productsC > div:nth-child(1):hover {box-shadow: 0 0 13px rgba(0, 0, 0, 0.9); transition: all 0.25s ease 0s;}
.productsC > div:nth-child(2) {width: 50.802%; position: relative; top: 30px; /*right: 0px; left: -27px; border-top: 4px solid #003f8e; background-color: rgba(255, 255, 255, 0.7);*/ padding: 28px 0 0 10px; z-index: 10;}
.productsC > div:nth-child(2)::before {content: ''; border-top: 4px solid #003f8e; background-color: rgba(255, 255, 255, 0.7); position: absolute; top: 0px; left: -27px; right: 0; bottom: 0; z-index: -1;}
.productsC > div:nth-child(2) h2 {font-weight: bold; color: #585858; margin-bottom: 13px;}
.productsC > div:nth-child(2) h2::first-letter {font-size: 26px; color: #003f8e;}
.productsC > div:nth-child(2) p {color: #585858; line-height: 174%; margin-bottom: 13px; padding: 0 25px 0 0;}
.productsD {display: flex; flex-wrap: wrap;}
.productsD > div {width: 31.898%; margin: 5.84% 2.153% 0 0; padding-bottom: 20.438%; position: relative; height: 0; overflow: hidden; cursor: pointer;}
.productsD > div:nth-child(3n+3), .productsD > div:last-child {margin: 5.84% 0% 0 0;}
.productsD > div > div {position: absolute; top: 0; left: 0; right: 0; bottom: 0; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; text-align: center; overflow: hidden; line-height: 0; font-size: 0;}
.productsD > div > div img {max-height: 100%!important; transform: scale(1.0, 1.0); transition: all 0.5s ease 0s;}
.productsD > div:hover > div img {transform: scale(1.3, 1.3); transition: all 0.25s ease 0s;}
.productsD > div > div.photo::before {content: ''; width: 100%; height: 0; background-color: rgba(0, 63, 142, 0.8); position: absolute; bottom: 0; left: 0; transition: all 0.5s ease 0s; z-index: 10;}
.productsD > div:hover > div.photo::before {content: ''; width: 100%; height: 100%; background-color: rgba(0, 63, 142, 0.8); position: absolute; bottom: 0; left: 0; transition: all 0.25s ease 0s; z-index: 10;}
.productsD > div > div.photo::after {content: ''; width: 49px; height: 49px; background: url("../images/icon_02.png") no-repeat center; background-size: cover; position: absolute; bottom: 15px; left: 20px; transition: all 0.25s ease 0s; z-index: 20;}
.productsD > div:hover > div.photo::after {content: ''; width: 49px; height: 49px; background: url("../images/icon_02.png") no-repeat center; background-size: cover; position: absolute; bottom: 50%; left: 50%; margin: 0 0 -25px -25px; transition: all 0.5s ease 0s; z-index: 20;}
.productsD > div a {position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 30;}
.productsD > div > div.movie::before {content: ''; width: 0; height: 0; border-radius: 50%; background-color: rgba(0, 63, 142, 0.8); position: absolute; bottom: 0%; left: 50%; transition: all 0.5s ease 0s; z-index: 10;}
.productsD > div:hover > div.movie::before {content: ''; width: 300%; height: 300%; background-color: rgba(0, 63, 142, 0.8); position: absolute; bottom: 50%; left: 50%; margin: 0 0 -150% -150%; transition: all 0.25s ease 0s; z-index: 10;}
.productsD > div > div.movie::after {content: ''; width: 80px; height: 80px; background: url("../images/icon_05.png") no-repeat center; background-size: cover; position: absolute; top: 50%; left: 50%; margin: -40px 0 0 -40px; transition: all 0.25s ease 0s; z-index: 20;}
.productsD > div:hover > div.movie::after {content: ''; width: 90px; height: 90px; background: url("../images/icon_05.png") no-repeat center; background-size: cover; position: absolute; bottom: 50%; left: 50%; margin: -45px 0 0 -45px; transition: all 0.5s ease 0s; z-index: 20;}


.machining {max-width: 1410px; padding: 0 20px; margin: auto; display: flex; flex-wrap: wrap;}
.machining > div {position: relative; width: 34.453%; margin: 1% 7.77% 9.584% 7.77%; border-radius: 20px; overflow: hidden; box-shadow: 4px 7px 10px rgba(131, 131, 131, 0.64); background-color: #fff; cursor: pointer; transition: all 0.5s ease 0s;}
.machining > div > div {position: relative; width: 100%; padding-bottom: 91.105%; height: 0; overflow: hidden;}
.machining > div > div > div {position: absolute; top: 0; left: 0; right: 0; bottom: 0; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; text-align: center; overflow: hidden; line-height: 0; font-size: 0;}
.machining > div > div > div img {max-height: 100%!important; transform: scale(1.0, 1.0); transition: all 0.5s ease 0s;}
.machining > div a {position: absolute; top: 0; left: 0; right: 0; bottom: 0; font-size: 0; line-height: 0; z-index: 100; text-decoration:none;}
.machining > div > h3 {position: relative; color: #3d3d3d; font-weight: bold; text-align: center; padding: 35px 10px; z-index: 5; transition: all 0.5s ease 0s;}
.machining > div > h3::before {content: ''; position: absolute; top: 50%; left: 50%; width: 0%; height: 0%; background-color: #003f8e; border-radius: 100px; z-index: -1; transition: all 0.5s ease 0s;}
.machining > div:hover {box-shadow: 4px 7px 13px rgba(0, 63, 142, 1); transition: all 0.25s ease 0s!important;}
.machining > div:hover > div > div img {transform: scale(1.3, 1.3); transition: all 0.25s ease 0s;}
.machining > div:hover > h3 {color: #fff; transition: all 0.25s ease 0s;}
.machining > div:hover > h3::before {content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; border-radius: 0; transition: all 0.25s ease 0s;}
.machiningSub {max-width: 1410px; padding: 0 20px; margin: auto;}
.machiningSub a {position: relative; display: block;}
.machiningSub a img {transform: scale(1.0, 1.0); transition: all 0.5s ease 0s;}
.machiningSub_24, .machiningSub_42, .machiningSub_33, .machiningSub_222 {display: flex; flex-wrap: wrap; line-height: 0; font-size: 0;}
.machiningSub_24 > div {width: 33.57%; margin: 0 2.2% 2.2% 0; overflow: hidden;}
.machiningSub_24 > div:nth-child(2n+2) {width: 64.23%; margin: 0 0 2.2% 0; overflow: hidden;}
.machiningSub_33 > div {width: 48.9%; margin: 0 2.2% 2.2% 0; overflow: hidden;}
.machiningSub_33 > div:nth-child(2n+2) {margin: 0 0 2.2% 0; overflow: hidden;}
.machiningSub_42 > div {width: 64.23%; margin: 0 2.2% 2.2% 0; overflow: hidden;}
.machiningSub_42 > div:nth-child(2n+2) {width: 33.57%; margin: 0 0 2.2% 0; overflow: hidden;}
.machiningSub_222 > div {width: 31.866%; margin: 0 2.2% 2.2% 0; overflow: hidden;}
.machiningSub_222 > div:nth-child(3n+3) {margin: 0 0 2.2% 0; overflow: hidden;}
.machiningSub a:hover img {transform: scale(1.3, 1.3); transition: all 0.5s ease 0s;}
.machiningSub a::before {content: ''; width: 100%; height: 0; background-color: rgba(0, 63, 142, 0.8); position: absolute; bottom: 0; left: 0; transition: all 0.5s ease 0s; z-index: 10;}
.machiningSub a:hover::before {content: ''; width: 100%; height: 100%; background-color: rgba(0, 63, 142, 0.8); position: absolute; bottom: 0; left: 0; transition: all 0.25s ease 0s; z-index: 10;}
.machiningSub a::after {content: ''; width: 49px; height: 49px; background: url("../images/icon_02.png") no-repeat center; background-size: cover; position: absolute; bottom: 15px; left: 20px; transition: all 0.25s ease 0s; z-index: 20;}
.machiningSub a:hover::after {content: ''; width: 80px; height: 80px; background: url("../images/icon_02.png") no-repeat center; background-size: cover; position: absolute; bottom: 50%; left: 50%; margin: 0 0 -40px -40px; transition: all 0.5s ease 0s; z-index: 20;}


.news {max-width: 1410px; padding: 0 20px; margin: auto;}
.news > div {display: flex; flex-wrap: wrap; padding-bottom: 65px; border-bottom: 1px solid #7d7d7d; margin-bottom: 30px;}
.news > div > div:nth-child(1) {width: 31.752%;}
.news > div > div:nth-child(1) div:nth-child(1) {position: relative; width: 100%; padding-bottom: 68.966%; height: 0; overflow: hidden;}
.news > div > div:nth-child(1) div:nth-child(1) div {position: absolute; top: 0; left: 0; right: 0; bottom: 0; display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-start; text-align: center;}
.news > div > div:nth-child(1) div:nth-child(1) div img {transform: scale(1.0, 1.0); transition: all 0.5s ease 0s;}
.news > div > div:hover:nth-child(1) div:nth-child(1) div img {transform: scale(1.3, 1.3); transition: all 0.25s ease 0s;}
.news > div > div:nth-child(1) div:nth-child(2) {position: absolute; top: 0; left: 0; background-color: rgba(0, 0, 0, 1); color: #fff; text-align: center; padding: 2px 7px 5px 7px; transition: all 0.5s ease 0s;}
.news > div > div:nth-child(1) div:nth-child(2) span {display: block; border-bottom: 1px solid #fff; padding: 0 0 5px 0; margin: 0 0 4px 0;}
.news > div > div:hover:nth-child(1) div:nth-child(2) {background-color: rgba(219, 78, 77, 1); transition: all 0.25s ease 0s;}
.news > div > div:nth-child(1) a {position: absolute; top: 0; left: 0; right: 0; bottom: 0; line-height: 0; font-size: 0; z-index: 100; text-decoration:none;}
.news > div > div:nth-child(2) {width: 68.248%; padding: 0 0 0 20px;}
.news > div > div:nth-child(2) h3 {position: relative; line-height: 106%; display: flex; flex-direction: column;}
.news > div > div:nth-child(2) h3::after {content: ''; width: 128px; height: 1px; line-height: 0; font-size: 0; background-color: #003f8e; display: block; margin: 10px 0 20px 0; transition: all 0.5s ease 0s;}
.news > div:hover > div:nth-child(2) h3::after {width: 100%; transition: all 0.25s ease 0s;}
.news > div > div:nth-child(2) p {line-height: 156%;}


.contact {max-width: 1410px; padding: 53px 90px; margin: auto; font-weight: bold; display: flex; flex-wrap: wrap; position: relative; z-index: 10;}
.contact::before {content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-color: #f8f8f8; z-index: -1;}
.contact span {color: #ee554f;}
.contact > div:nth-child(1) {width: 39.84%; line-height: 0; font-size: 0;}
.contact > div:nth-child(1) iframe {height: 575px; box-shadow: 0px 0px 24px rgba(219, 213, 213, 0.74);}
.contact > div:nth-child(2) {width: 60.16%; padding: 5px 0 0 75px; color: #474747;}
.contact > div:nth-child(2) p {margin-bottom: 30px; font-weight: bold;}
.row_a {display: flex; flex-wrap: wrap; border-bottom: 1px solid #cccccc; padding: 0 0 15px 0; margin-bottom: 15px;}
.row_a > div:nth-child(1) {width: 90px;}
.row_a > div:nth-child(2) {width: calc(100% - 90px);}
.row_a > div:nth-child(2) input {width: 100%; display: flex; padding: 0 20px 0 0; color: #003f8e; border: 0; background-color: transparent; font-family:'Microsoft JhengHei';}
.row_a > div:nth-child(2) select {width: 100%; color: #003f8e; border: 0; background-color: transparent; font-family:'Microsoft JhengHei'; background:none; background-image:url(../images/icon_06.png); background-repeat:no-repeat; background-position:right center; -webkit-appearance: none; -o-appearance: none; -moz-appearance: none; appearance: none;}
.row_b {display: flex; flex-wrap: wrap; border-bottom: 1px solid #cccccc; padding: 0 0 15px 0; margin-bottom: 15px;}
.row_b > div {width: 100%; padding-bottom: 5px;}
.row_b > div textarea {width: 100%; height: 135px; display: flex; padding: 20px; color: #003f8e; border: 0; background-color: transparent; font-family:'Microsoft JhengHei';}
.row_c {line-height: 0; font-size: 0; padding: 25px 0 85px 0;}
.row_d {display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center;}
.row_d a {margin-left: 24px;}