/* CSS Document */

body {	-webkit-text-size-adjust:100%; font-family: 'Noto Sans TC', sans-serif; overflow-x: hidden; position: relative; background: #f6f6f6;}
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; 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: 110px;}
#content p{ padding-bottom: 30px; margin-bottom: 0; margin-top: 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 { position: relative;margin-bottom: calc(20px + 3%); display: flex; flex-direction: row; flex-wrap: wrap; background: #113759;}
.banner > div:nth-of-type(1) {  width: 32%; height: 100%;padding: calc(20px + 3%) 3% 0 3%;position: absolute;}
.banner > div:nth-of-type(1)::after { content: ""; position: absolute; left: 0; top: 0; background: rgba(17,55,89,.75); width: 650px; height: 100%; clip-path: polygon(0% 0, 100% 0%, calc(100% - 240px) 100%, 0 100%);z-index: 1;}
.banner > div:nth-of-type(1) h1 { letter-spacing: 0; font-weight: 700; font-size: calc(24px + 0.6vw); color: #fff; padding: 0; margin: 0; line-height: 1.3;position: relative;z-index: 2;}
.banner > div:nth-of-type(1) #path{z-index: 2;}
.banner > div:nth-of-type(2) { width: 100%;/*clip-path: polygon(145px 0, 100% 0%, 100% 100%, 0 100%);*/ }
.banner > div:nth-of-type(2) img { object-fit: cover; width: 100%; height: 100%;}
.banner-pc { height: 440px;}
.banner-mobile { display: none;}

#path { text-align: left; position: relative; padding: 0 0 calc(20px + 3%) 0; }
#path ul { margin: 0; padding: 0; }
#path li { display: inline-block; vertical-align: top; font-size: 15px; line-height: 24px; letter-spacing: 0.05rem;}
#path li:after { content:"/"; display: inline-block; vertical-align: top; padding: 0 0 0 4px; color: #fff;}
#path li:last-child { pointer-events: none;}
#path li:last-child:after { display: none;}
#path li a { color: #fff; }
#path li a img { width: 16px; display: inline-block; position: relative; top:-2px;}
#path li a:hover { color: #fff; opacity: 0.5;}
#path li:last-child a { color: #fff;}

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

/*about*/
.about-section-1 { padding: 0 5% calc(20px + 5%) 5%; display: flex; flex-direction: row; flex-wrap: wrap; align-items: center;}
.about-section-1 > div:nth-of-type(1) { width: 40%; position: relative; z-index: 3; padding:4% 5%;}
.about-section-1 > div:nth-of-type(1):after { content: ""; position: absolute; width: calc(100% + 125px); height: 100%; border: 5px solid #113759; top:0; left: 0;}
.about-section-1 > div:nth-of-type(1) > div { position: relative; z-index: 3;}
.about-section-1 > div:nth-of-type(2) { width: 60%; }

.title01 { margin-bottom: 20px; padding-bottom: 34px; background: url("../images/title-icon.png") left bottom no-repeat; display: block;}
.title01 div, .title01 h1 {  padding: 0; margin: 0 0 0px 0; line-height: 1.3; font-weight: 700; color: #113759; font-size: 34px;}

.title02 { font-weight: 300; font-size: 28px; line-height: 1.3; padding-bottom: 10px; color: #113759;}

.about-section-2 { padding: calc(20px + 5%) 5%; background: #e8e8e8;}
.about-section-2-content { display: flex; flex-direction: row; flex-wrap: wrap;}
.about-section-2-content > div { width: 50%;}
.about-section-2-content > div:nth-of-type(1) { padding-right: 5%;}

.about-section-3 { padding: calc(20px + 5%) 5%; background: #f6f6f6; }

.about-history-content { display: flex; flex-direction: row; flex-wrap: wrap; position: relative; align-items: center; padding: 90px 0 25px 0;}
.about-history-pto { width: 300px;}
.about-history-data { width: calc(100% - 300px); padding-left: 135px;}
.about-history-year { position: absolute; width: 135px; height: 100%; top: 0; left: 300px; text-align: center;}
.about-history-year:after { position: absolute; content: ""; width: 1px; height: 100%; top: 0; left: 50%; background: #113759; transform: translateX(-50%);}
.about-history-year > div { position: relative; z-index: 3; text-align: center; background: #f6f6f6; font-size: 40px; font-weight: 700; color: #222; padding-bottom: 15px;}
.about-history-year > div:after { position: absolute; content: ""; width: 10px; height: 10px; border-radius: 100%;background: #113759; bottom: 0; left: calc(50% - 5px);}

/*achievement*/
.achievement-section { display:flex; flex-direction: column; flex-wrap: nowrap;}
.achievement-section > div { display:flex; flex-direction: row; flex-wrap: wrap; padding-bottom: calc(20px + 5%);}
.achievement-section > div:nth-child(even) > div:nth-of-type(1) { order: 2;}
.achievement-section > div:nth-child(even) > div:nth-of-type(2) { order: 1;}
.achievement-section > div > div { padding-top: 50px;}
.achievement-section > div > div:nth-of-type(1) { width: 34%; padding-left:5%; padding-right: 5%;}
.achievement-section > div > div:nth-of-type(2) { width: 66%; position: relative;padding-left:45px; padding-right: 45px;}
.achievement-section > div > div:nth-of-type(2):before { content: ""; position: absolute; top: 0; left: 0; background: #e8e8e8; width: 100%; height: 280px;}

.achievement-pto { padding: 12px calc(10px + 5%); border-radius:10px;box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.1); display: block; position: relative; margin-bottom: 14px; background: #fff;}
.achievement-inner-pto { padding-bottom: 138%; }
.achievement-pto:hover .achievement-pto-over { transform: scale(1); opacity: 0.4;}
.achievement-pto:hover .achievement-pto-over-icon { top: 50%;opacity: 1;}
.achievement-pto-over { position: absolute; z-index: 3; top: 0; left: 0; width: 100%; height: 100%; border-radius: 10px; background: #000; transform-origin: 50% 50%; transition: all 0.4s ease-out 0s; opacity: 0; transform: scale(0);}
.achievement-pto-over-icon{ position: absolute; z-index: 4; top: 0%; left: 50%; width: 50px; height: 50px; transform: translate(-50%, -50%);transition: all 0.4s ease-out 0s; opacity: 0; }
.achievement-title { font-size: 15px; line-height: 1.5;}
.achievement-title span { font-size: 20px; font-weight: 700; display: block; padding-bottom: 4px;line-height: 1.3;}

.loop2 { position: relative; }
.loop2 .owl-dots { display: none;}
.loop2 .owl-item {position: relative; }
.loop2 .owl-nav { position: absolute; top:calc(50% - 100px); left: 0; width: 100%; z-index: 11;}
.loop2 .owl-prev, .loop2 .owl-next { position:absolute; z-index:100; top:calc(50% - 0px); width: 60px !important; height: 60px !important; border-radius: 100% !important; background: #417594 !important; border: 0px solid #fff !important;}
.loop2 .owl-prev { left:-45px; }
.loop2 .owl-next { right:-45px;}
.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: 25px; height: 25px; display: block; border-width: 0; border-style: solid; border-color: #fff; background-size: contain;}
.loop2 .owl-prev:before { content: ""; margin-left: 20px; background-image: url("../images/arrow-left.png"); }
.loop2 .owl-next:before { content: "";  margin-left: 15px; background-image: url("../images/arrow-right.png");}
.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;}

/*plasma-machine*/
.plasma-machine-box { padding-bottom:calc(20px + 5%); }
.plasma-machine-section { position: relative; margin-bottom: calc(15px + 3%); display: flex; flex-direction: row; flex-wrap: wrap;}
.plasma-machine-section > div:nth-of-type(1) { width: calc(50% - 58px); padding-right: 5%;}
.plasma-machine-section > div:nth-of-type(2) { width: calc(50% + 58px); }
.plasma-machine-section:before { position: absolute; content: ""; width: 1px; height: 100%; left: 0; top: 0; background: #113759;}
.plasma-machine-section .title01  { position: relative; z-index: 2;margin-bottom: 0; padding-bottom: 60px; background: url("../images/title-icon.png") 0% calc(100% - 28px) no-repeat #f6f6f6;}
.plasma-machine-data  { padding-left: 26px;}

/*products*/
.products-list-section { display: flex; flex-direction: column; flex-wrap: nowrap; }
.products-list-section > div { padding: 0 5%; margin-bottom: 40px; background: #fff;}
.products-list-section > div:nth-child(even) .products-list > div:nth-of-type(1) { order: 2;}
.products-list-section > div:nth-child(even) .products-list > div:nth-of-type(2) { order: 1;}
.products-list { display: flex; flex-direction: row; flex-wrap: wrap; align-items: center;}
.products-list > div { width: 50%;}
.products-list-pto { line-height: 0;}
.btn01 { display: block; width: 28px; position: relative; height: 15px; border-bottom: 2px solid #417594;}
.btn01:hover { width: 45px;}
.btn01:after { content: ""; position: absolute;  width: 2px; height: 15px; background: #417594; right: -1px; bottom: -1px; transform-origin: 100% 100%; transform: rotate(-45deg);}

/*products-list*/
.products-list-box { display: flex; flex-direction: row; flex-wrap: wrap; align-items: flex-start; padding-bottom: calc(20px + 5%);}
.products-list-box > div:nth-of-type(1) { width: 320px; background: #fff; padding: 25px 22px;}
.products-list-box > div:nth-of-type(2) { width: calc(100% - 320px); padding-left: 4%;}

.products-list-2 { display: flex; flex-direction: row; flex-wrap: wrap;}
.products-list-2 > div { width: 50%; padding: 0 17px 34px 17px;}
.products-list-2 > div:nth-child(even) .idx-pro-data { background: #07517d;}

.idx-pro-pto { padding-bottom: 100%; position: relative; display: block;}
.idx-pro-pto img { transition: all 1.5s ease-out 0s; }
.idx-pro-pto:hover img { transform: scale(1.1);}
.idx-pro-pto:hover .idx-pro-btn { transform:translate(-50%, -50%) scale(1) rotate(360deg); opacity: 1;}
.idx-pro-btn { position: absolute; z-index: 4; width: 100px; height: 100px; border-radius: 100%; background: rgba(0,0,0,.8);display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: center; align-items: center; left: 50%; top:50%; transform:translate(-50%, -50%) scale(0);transition: all 0.5s ease-out 0s; opacity: 0; }
.idx-pro-btn img { width: 65px !important;}
.idx-pro-data { background: #24709d; padding: 25px; color: #fff; font-size: 16px; line-height: 1.4;}
.idx-pro-data > a {  margin-bottom: 14px; min-height: 58px; font-weight: 700; color: #fff !important; font-size: 20px;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;}
.idx-pro-data > a:hover { opacity: 0.7;}

#page { text-align: center; padding:20px 0 0px 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: #113759; 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*/
.products-detail-banner{  margin-bottom: 0;}
.products-detail-banner > div:nth-of-type(1) {  width: 100%; padding: 30px 3% 20px 3%; position: relative;}
.products-detail-banner #path { padding-bottom: 0;}

.products-detail-top-section { background: #fff; padding: 20px 5%;display: flex; flex-direction: row; flex-wrap: wrap; margin-bottom: calc(10px + 2%);}
.products-detail-top-section > div:nth-of-type(1) { width: calc(50% - 90px); padding-right: 5%;}
.products-detail-top-section > div:nth-of-type(2) { width: calc(50% + 90px); padding-top: 4%;}

.loop { position: relative; }
.loop .owl-dots { display: none;}
.loop .owl-item {position: relative; }
.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: 60px !important; height: 60px !important; border-radius: 100% !important; background: #417594 !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: 25px; height: 25px; display: block; border-width: 0; border-style: solid; border-color: #fff; background-size: contain;}
.loop .owl-prev:before { content: ""; margin-left: 20px; background-image: url("../images/arrow-left.png"); }
.loop .owl-next:before { content: "";  margin-left: 15px; background-image: url("../images/arrow-right.png");}
.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;}

.social-tool { padding-bottom: 25px;}

.products-detail-info { margin-bottom: 20px; display: flex; flex-direction: row; flex-wrap: nowrap; align-items: center;}
.products-detail-info > div:nth-of-type(1) { position: relative; width: 96px; text-align: center; background: #333333; color: #fff; font-size: 15px; padding:10px 5px ;line-height: 1.2;}
.products-detail-info > div:nth-of-type(1):after { position: absolute; content: ""; width: 20px; height: 2px; background: #333; top:50%; right: -20px; transform: translateY(-50%); }
.products-detail-info > div:nth-of-type(2) { width: calc(100% - 96px); padding-left: 30px; }
.products-detail-info > div:nth-of-type(2) img { width: 36px; }

.products-detail-btn-box { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: space-between; align-items: center; padding-top: 25px; border-top:1px solid #cccccc;}
.products-detail-btn-box > div { margin-bottom: 10px;}
.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: #113759 !important;}
.tool-btn-box > a > img { width: 30px;}
.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; width: 110px; line-height: 40px; background: #113759; border-radius: 15px 0 15px 0;text-align: center; overflow: hidden;}
.btn02 span { position: relative;display: inline-block;z-index: 2;letter-spacing: 0.1rem; font-size: 15px; color: #fff; font-weight: 700;}
.btn02:after { position: absolute; content: ""; width: 0%; height: 110%; top: 0; right: -15px; transition: all 0.4s ease-out 0s; background: #2da0ce; transform: skewX(-10deg);}
.btn02:hover:after { left: -15px;width: 140%;}
.btn02:hover span { color: #fff;}

.bg-white { background: #fff;}

.title03 { padding-bottom: 13px;}
.title03 > div { display: inline-block; padding-bottom: 0px; position: relative; }
.title03 > div:after { content: ""; position: absolute; background: #c9d6dd; bottom: 0; left: 0; width: 100%; height: 14px;}
.title03 > div > span { display: inline-block; position: relative; z-index: 3; font-size: 28px; font-weight: 700;color: #113759; line-height: 1.3; }

.p-detail-section { padding: calc(20px + 2%) 0;}
.p-detail-pto { margin-bottom: 20px; text-align: center;}

.layout-50 { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: space-between;}
.layout-50 > div { width: 48.5%;}

.related-pro-section { padding:calc(20px + 4%) 5%;}

.loop3 { position: relative; padding-top: 25px; padding-bottom: 50px;}
.loop3 .owl-dots { }
.loop3 .owl-item {position: relative; }
.loop3 .owl-item:nth-child(even) .idx-pro-data { background: #07517d;}
.loop3 .owl-nav { position: absolute; top:calc(50% - 40px); left: 0; width: 100%; z-index: 11;}
.loop3 .owl-prev, .loop3 .owl-next { position:absolute; z-index:100; top:calc(50% - 0px); width: 50px !important; height: 50px !important; border-radius: 100% !important; background: rgba(255,255,255,.2) !important; border: 0px solid #fff !important;}
.loop3 .owl-prev { left:15px; }
.loop3 .owl-next { right:15px;}
.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: 13px; height: 13px; background-size: contain; display: block; border-width: 1px 1px 0 0; border-style: solid; border-color: #fff;}
.loop3 .owl-prev:before { content: ""; transform: rotate(-135deg); margin-left: 20px; }
.loop3 .owl-next:before { content: ""; transform: rotate(45deg); margin-left: 15px;}
.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:-20px; width: 100%; text-align: center !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: #111 !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;}

/*news*/
.news-list-box > div:nth-of-type(1) { background: transparent; padding: 0;}

.news-menu-box { background: #fff; padding: 25px 20px; margin-bottom: 20px;}
.news-menu-title { font-size: 24px; font-weight: 700; color: #113759; line-height: 1.3; padding-bottom: 10px;}
.news-menu-link > a { display: block; line-height: 1.3; border-bottom: 1px solid #d3d3d3; padding: 13px 0;}
.news-menu-link > a:hover, .news-menu-link > a.current { color: #417594;}

.idx-news-content { display: flex; flex-direction: row; flex-wrap: wrap; padding-bottom: 28px; border-bottom: 1px solid #d7d7d7; margin-bottom: 28px;}
.idx-news-content > div:nth-of-type(1) { width: 152px; background: #fff;}
.idx-news-content > div:nth-of-type(2) { width: calc(100% - 152px); padding-left: 18px;}
.idx-news-pto { border: 1px solid #e1e1e1; padding-bottom: 100%; display: block;}
.idx-news-tag { margin-bottom: 5px;}
.idx-news-tag > a { display: inline-block; line-height: 25px; background: #417594; color: #fff !important; padding: 0 12px; font-size: 14px; min-width: 115px; text-align: center;}
.idx-news-tag > a:hover { background: #333;}
.idx-news-date { font-size: 15px; line-height: 1; padding-bottom: 5px;}
.idx-news-title { font-size: 20px; font-weight: 700; line-height: 1.5; padding-bottom: 6px; display: block;}
.idx-news-title:hover { color: #417594;}
.idx-news-data { font-size: 15px; line-height: 1.3;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;}

/*application*/
.application-list { padding-bottom: calc(20px + 2%); display: flex; flex-direction: row; flex-wrap: wrap;}
.application-list > a { width: 50%; border-bottom: 1px solid #a7a7a7; margin-bottom: 40px; position: relative;display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; background: transparent;}
.application-list > a > div { width: 50%; }
.application-list > a:hover { background: #113759;}
.application-list > a:hover .application-btn { background: #113759;}
.application-list > a:hover .application-btn span { background: #fff;}
.application-list > a:hover .application-list-title { color: #fff;}
.application-list-pto { padding-bottom: 31.1%;}
.application-list-pto img { transition: all 0.4s ease-out 0s; }
.application-list-title { padding: 0 40px; font-weight: 700; font-size: 20px; line-height: 1.4;}
.application-btn { position: absolute; z-index: 4; width: 50px !important; height: 50px; border-radius: 100%; background: #e1e1e1; left: 50%; top: 50%; transform: translate(-50%, -50%); display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: center;transition: all 0.4s ease-out 0s; }
.application-btn span { transition: all 0.4s ease-out 0s; width: 12px; height: 20px; background: #333333; clip-path: polygon(0 0, 100% 50%, 0 100%);}

/*cases*/
.cases-section { padding-bottom: calc(20px + 5%);}

.cases-menu { margin-bottom: 25px; display: flex; flex-direction: row; flex-wrap: nowrap; position: relative;}
.cases-menu:after { position: absolute; content: ""; width: calc(100% - 5px); height: 5px; left: 0; bottom: 0; background: #cfcfcf;transition: all 0.4s ease-out 0s; }
.cases-menu > a { display: block; width: calc(100% - 5px); margin-right: 5px; text-align: center; padding: 14px 10px; position: relative; line-height: 1.2; background: #939393; color: #fff; border-radius: 15px 15px 0 0;}
.cases-menu > a:hover { color: #fff !important; background: #07517d;}
/*.cases-menu > a:after { position: absolute; content: ""; width: 100%; height: 5px; left: 0; bottom: 0; background: #cfcfcf;transition: all 0.4s ease-out 0s; }*/
.cases-menu > a.current { color: #fff; background: #07517d;}
/*.cases-menu > a.current:after { background: #417594; }*/

.cases-list { display: flex; flex-direction: row; flex-wrap: wrap;}
.cases-list > a { padding: 0 28px 50px 28px; width: 33.33%;}
.cases-list > a:hover img { transform: scale(1.1);}
.cases-list > a:hover .btn01 { width: 45px;}
.cases-list-pto { padding-bottom: 75%;}
.cases-list-pto img { transition: all 1.4s ease-out 0s;}
.cases-list-title { position: relative; z-index: 4; margin-top: -38px; margin-left: auto; margin-right: auto; width: calc(100% - 40px); background: #fff; padding: 20px 20px 50px 20px; box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.1); font-size: 20px;}
.cases-list-title > div { font-size: 20px; font-weight: 700; line-height: 1.3; min-height: 52px;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;}
.cases-list-title > span { position: absolute; left: 20px; bottom: 20px; display: block;transition: all 0.4s ease-out 0s;}

/*clients*/
.clients-list { display: flex; flex-direction: row; flex-wrap: wrap;}
.clients-list > a { margin: 0 28px 50px 28px; padding: 30px; width: calc(33.33% - 56px); background: #ffffff; position: relative; overflow: hidden;}
.clients-list > a:hover:before { left: -100%;clip-path: polygon(0 0, 100% 0%, calc(100% - 0px) 100%, 0 100%);}
.clients-list > a:before { content: ""; position: absolute; top: 0; left: 0; height: 100%; width: 80%; background: #eeeeee; clip-path: polygon(0 0, 100% 0%, calc(100% - 60px) 100%, 0 100%);transition: all 0.4s ease-out 0s;}
.clients-list-pto { padding-bottom: 50%; position: relative; z-index: 3; mix-blend-mode: multiply}
.clients-list-title { position: relative; z-index: 3; display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: space-between; align-items: center;}
.clients-list-title > div:nth-of-type(1) { width:calc(100% - 40px); font-size: 16px; font-weight: 700; padding-right: 10px; line-height: 1.3;}
.clients-list-title > div:nth-of-type(2) { width:40px;}

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

.contact-layout { display: flex; flex-direction: row; flex-wrap: wrap;}
.contact-layout > div { line-height: 1.3; margin-bottom: 20px;}
.contact-layout > div:nth-child(odd) { width: 112px; padding-top: 8px; font-weight: 700;}
.contact-layout > div:nth-child(even) { width: calc(100% - 112px);}

.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: 18px; border-width:1px; border-style: solid; border-color: #999999; margin: 0px 0 0px 0; width: 100%; padding:0px 15px ; color:#333; background: transparent; font-family: 'Noto Sans TC', sans-serif; line-height: 40px; border-radius: 0px; }
.contact-form textarea { height:250px; padding:15px; 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: 18px; border-width:1px; border-style: solid; border-color: #999999; color:#333; font-family: 'Noto Sans TC', sans-serif;  padding:0px 35px 0px 15px;  line-height: 40px; border-radius: 0px;}
.contact-form option { padding:1px 5px;}
.contact-form select::-ms-expand {
    display: none;
}

.contact-note2 {  margin-top: 10px; display: inline-block;position: relative;padding-left: 22px; padding-right: 15px; padding-bottom: 0px; cursor: pointer; -webkit-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none; line-height: 130%; color: #333; margin-bottom: 0;}
.contact-note2 input {position: absolute;opacity: 0;cursor: pointer;height: 0;width: 0;}
.checkmark {position: absolute;top: 4px;left: 0;height: 16px;width: 16px;background-color: transparent; border: 1px solid #a4a4a4; border-radius: 100%;}
.contact-note2:hover input ~ .checkmark {background-color: #eeeeee;}
.contact-note2 input:checked ~ .checkmark {border-color: #1178f2;}
.checkmark:after {content: "";position: absolute;display: none;}
.contact-note2 input:checked ~ .checkmark:after {display: block;}
.contact-note2 .checkmark:after {left: 2px;top: 2px;width: 10px;height: 10px; background: #1178f2; border-radius: 100%;}

.contact-btn { display: block !important; width: 200px; margin: 0 0 0 auto; line-height: 50px; color: #fff; text-align: center; border-width: 0; background: #113759; font-weight: 500;}

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

.contact-info-section { padding: calc(20px + 2.5%) 5%; background: #fff;}
.contact-info-content { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: space-between;}
.contact-info-content > div { width: 31%;}

.contact-info {display: flex; flex-direction: row; flex-wrap: wrap; }
.contact-info > div {margin-bottom: 10px;}
.contact-info > div:nth-child(odd) { width: 24px;}
.contact-info > div:nth-child(even) { width: calc(100% - 24px); font-size: 17px; font-weight: 400; padding-left: 10px; line-height: 130%; padding-top: 6px;}

.contact-share-link {display: flex; flex-direction: row; flex-wrap: wrap; }
.contact-share-link > a {display: inline-block; width: 25px; margin: 0 8px 6px 0;}

.inquiry_area { margin-top: 5%;}


@media only screen and (max-width: 1365px) {
	.title01 div, .title01 h1 { font-size: 25px;}
	
	.title02 { font-size: 20px;}
}

@media only screen and (max-width: 1279px) {
    #content { font-size: 16px; padding-top: 60px; }
    #content p{ font-size: 16px;}
    p, td, li, label { font-size: 16px;}
	
	.banner { }
	.banner-pc { display: none}
	.banner-mobile { display: block;height: 300px;}
	.banner > div:nth-of-type(1) { width: 100%; padding: 20px 5%; order: 2;}
    .banner > div:nth-of-type(1)::after {display: none;}
	.banner > div:nth-of-type(2) { width: 100%; clip-path: polygon(0 0, 100% 0%, 100% 100%, 0 100%); order: 1; }
	
	#path { padding: 0 0 15px 0; }
	
	.achievement-section > div > div:nth-of-type(1) { width: 100%; padding-top: 0;}
	.achievement-section > div > div:nth-of-type(2) { width: 100%; position: relative;padding-left:45px; padding-right: 45px;}
	
	.achievement-section > div:nth-child(even) > div:nth-of-type(1) { order: 1;}
	.achievement-section > div:nth-child(even) > div:nth-of-type(2) { order: 2;}
	
	.products-list-box > div:nth-of-type(1) { width: 100%; background: none; padding: 0; margin-bottom: 10px;}
	.products-list-box > div:nth-of-type(2) { width: calc(100% - 0px); padding-left: 0%;}
	
	.products-detail-top-section > div:nth-of-type(1) { width: 100%; padding-right: 0%;}
	.products-detail-top-section > div:nth-of-type(2) { width: 100%; padding-top: 20px;}
	
	.news-list-box > div:nth-of-type(1) { order: 2; margin-top: 10px;margin-bottom: 0px;}
	.news-list-box > div:nth-of-type(2) { order: 1; padding-bottom: 40px;}
	
	.application-list-title { font-size: 18px;}
	
	.cases-list-title > div { font-size: 18px; min-height: 50px;}
	
	.inquiry_area { margin-top: 40px;}
}

@media only screen and (max-width: 980px) {
	.about-section-1 > div:nth-of-type(1) { width: 95%; order: 2; padding:4% 5%; margin: 0 auto;}
	.about-section-1 > div:nth-of-type(1):after { width: 100%; height: calc(100% + 35px); top:-35px; }
	.about-section-1 > div:nth-of-type(2) { width: 100%; order: 1; }
	
	
	.about-section-2-content > div { width: 100%;}
	.about-section-2-content > div:nth-of-type(1) { padding-right: 0%; text-align: center; margin-bottom: 25px;}
	
	.about-history-content {padding: 70px 0 20px 70px; flex-direction: column; align-items: flex-start;}
	.about-history-year { width: 70px; left: 0px; }
	.about-history-year > div { font-size: 25px; }
	.about-history-pto { width: 100%;max-width: 300px; margin-bottom: 10px;}
	.about-history-data { width: calc(100% - 0px); padding-left: 0px;}
	
	.plasma-machine-section > div:nth-of-type(1) { width: 100%; padding-right: 0%;}
	.plasma-machine-section > div:nth-of-type(2) { width: 100%; padding-bottom: 30px; }
	.plasma-machine-section:before { width: 100%; height: 1px; left: 0; top: auto; bottom: 0;}
	.plasma-machine-data  { padding-left: 0px; padding-bottom: 20px;}
	
	.products-list { padding-bottom: 40px;}
	.products-list > div { width: 100%; }
	.products-list > div:nth-of-type(1) { text-align: center;}
	.products-list-section > div:nth-child(even) .products-list > div:nth-of-type(1) { order: 1;}
	.products-list-section > div:nth-child(even) .products-list > div:nth-of-type(2) { order: 2;}
	
	.idx-pro-data > a { font-size: 18px; min-height: 54px;}
	
	.title03 > div > span { font-size: 23px; }
	
	.products-detail-top-section { margin-bottom: 0;}
	
	.layout-50 > div { width: 100%;}
	
	.cases-menu { display: none;}
	
	.cases-list > a { padding: 0 15px 40px 15px; width: 50%;}
	
	.clients-list > a { margin: 0 15px 30px 15px; width: calc(50% - 30px);}
	
	.contact-section > div:nth-of-type(1) { width: calc(100% + 0px); padding-bottom: 30px;}
	.contact-section > div:nth-of-type(2) { width: calc(100% - 0px); padding-left: 0%;}
	
	.contact-info-content > div { width: 100%; padding-bottom: 25px;}
	.contact-map iframe { height: 350px;}
}
@media only screen and (max-width: 768px) {
	.loop .owl-prev, .loop .owl-next { width: 30px !important; height: 30px !important; }
	.loop .owl-prev:before, .loop .owl-next:before { width: 15px; height: 15px;}
	.loop .owl-prev:before { margin-left: 7px; }
	.loop .owl-next:before { margin-left: 7px; }
    
	.idx-news-title { font-size: 17px;}
	
	.application-list > a { width: 100%;}
	
}
@media only screen and (max-width: 640px) {
	.products-list-2 > div { width: 100%; padding: 0 0px 28px 0px;}
	
	.cases-list > a { padding: 0 0px 30px 0px; width: 100%;}
	
	.contact-layout > div:nth-child(odd) { width: 100%; padding-top: 0px; }
	.contact-layout > div:nth-child(even) { width: calc(100% - 0px);}
}
@media only screen and (max-width: 570px) {
	.banner-mobile { height: 200px;}
	
	.application-list > a { padding-top: 15px; margin-bottom: 15px;}
	.application-list > a > div { width: 100%; }
	.application-list-pto { padding-bottom: 49.1%;}
	.application-list-title { padding:10px; text-align: center}
	
	.clients-list > a { margin: 0 0px 30px 0px; width: calc(100% - 0px);}
}

@media only screen and (max-width: 414px) {
	.idx-news-content > div:nth-of-type(1) { width: 100%; margin-bottom: 15px;}
	.idx-news-content > div:nth-of-type(2) { width: calc(100% - 0px); padding-left: 0px;}
	
	.inquiry_area { margin-top: 30px;}
}

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