/* CSS Document */

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

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

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

* { box-sizing: border-box;}

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

#content { font-size: 17px; line-height:34px; color: #333333; padding-top: 100px; font-weight: 400;}
#content p{ margin-bottom: 30px; margin-top: 0; font-size: 17px;line-height:34px; font-weight: 400;}
p, td, li, label { font-size: 17px; }
.menuzord-menu>li { line-height: 180%;}

.demo-section { background: url(../images/demo-bg.jpg) no-repeat top center; background-size: 100%; padding: 0 5%; overflow: hidden;} 
.demo-top { padding-bottom: 20px; display: flex; flex-direction: row; flex-wrap: wrap; justify-content: space-between; padding-top: 40px;}
.demo-top h1 { font-family: 'Noto Serif TC', sans-serif; letter-spacing: 0.1rem; font-size: 32px; color: #333333; line-height: 110%; font-weight: 700; padding-bottom: 10px;}

#path { padding-bottom: 10px;}
#path ul { margin-bottom: 0; padding: 0;}
#path li { display: inline-block; vertical-align: top; font-size: 13px; color: #333333;}
#path li:after { content:"/"; display: inline-block; vertical-align: top; padding: 0 0 0 4px;}
#path li:last-child { pointer-events: none;}
#path li:last-child:after { display: none;}
#path li a { color: #333333;}
#path li a:hover, #path li:last-child a { color: #e12f29;}

/*company*/
aside { position: relative; border:1px solid #dadada; background: rgba(255,255,255,.4); margin-bottom: 30px;}
aside:before { position: absolute; content: ""; width: 10px; height: 10px; border-width: 1px 0 0 1px; border-color: #000000; border-style: solid; top: -1px; left: -1px;}
aside:after { position: absolute; content: ""; width: 10px; height: 10px; border-width: 1px 1px 0 0; border-color: #000000; border-style: solid; top: -1px; right: -1px;}
.cssmenu {background: transparent; border: 0;}
.cssmenu::before, .cssmenu::after {content: none;}
.cssmenu ul, .cssmenu ul li {list-style-type:none; margin: 0; padding: 0;}
.cssmenu ul {width: 100%; display: flex; flex-wrap: wrap; justify-content: center; padding-bottom: 10px;}
.cssmenu ul li {padding: 5px;}
.cssmenu ul li a:link, .cssmenu ul li a:visited {text-decoration:none; color:#e02829; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; padding: 0px 15px; border: 1px solid #e02829; border-radius: 40px; transition: all 0.5s ease 0s;}
.cssmenu ul li a:active, .cssmenu ul li a:hover {text-decoration:none; color:#fff; background: #e02829; cursor:pointer; transition: all 0.5s ease 0s;}
.cssmenu ul li.current a {color:#fff; background: #e02829;}
.side_classLink { position: relative; padding: 25px 20px; }
.side_classLink:before { position: absolute; content: ""; width: 10px; height: 10px; border-width:0 0 1px 1px; border-color: #000000; border-style: solid; bottom: -1px; left: -1px;}
.side_classLink:after { position: absolute; content: ""; width: 10px; height: 10px; border-width:0 1px 1px 0; border-color: #000000; border-style: solid; bottom: -1px; right: -1px;}
.side_classLink > ul { list-style:none; margin: 0; padding: 0; display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: space-around; align-items: center;}
.side_classLink > ul > li { padding: 0; margin: 0; max-width: 140px; text-align: center;}
.side_classLink > ul > li > a{ font-size: 16px; color: #333; display:block; padding:0 5px; line-height:120%; font-weight: 500;}
.side_classLink > ul > li > a:hover, .side_classLink > ul > li > a.current { color:#e02829; }
.side_classLink > ul > li > ul { border-bottom: 1px solid #898989; padding-bottom: 15px; padding-top: 15px;}
.side_classLink > ul > li > ul > li { display: block;}
.side_classLink > ul > li > ul > li > a{ display: block; position: relative; padding-bottom: 13px; color: #898989; font-size: 15px; line-height: 100%; }
.side_classLink > ul > li > ul > li > a:hover, .side_classLink > ul > li > ul > li > a.current { color:#2660ad;}
.side_classLink > ul > li.current02{ display:none; }
.m_classLink{ display:none;}

.banner {position: relative; margin-bottom: 55px; line-height: 0;}
.banner img {position: relative; z-index: 3;box-shadow: 0px 20px 20px 0px rgba(0,0,0,0.35); }
.banner:after {position: absolute; content: ""; width: 100%; height: 85%; top: 0; right: -90%; background: #e02829; animation: bg-animated 3s ease 0s; transform-origin: 0% 50%;}


@keyframes bg-animated {
  0% {
      transform:scaleX(0);
      opacity: 0;
  }
  100% {
      transform:scaleX(1);
      opacity: 1;
  }
}

.title04 { line-height: 110%; padding-bottom: 30px; font-size: 30px; position: relative;font-weight: 700; padding-left: 30px; letter-spacing: 0.05rem;font-family: 'Noto Serif TC', sans-serif; }
.title04:before, .title04:after { content: ""; position: absolute; left: 0px; width: 15px; height: 15px; transform: rotateY(45deg) rotateZ(45deg);}
.title04:before{ top:0px; background: #e02829;}
.title04:after { top:20px; background: #f2a829;}

.company-ce { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: center; padding-bottom: 20px;}
.company-ce > div { padding: 0 35px 50px 35px;}
.company-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); padding-bottom: 30px; gap: 25px; line-height: 1.3;}
.company-grid img {margin: 0 0 10px 0;}

.company-section2 { position: relative; display: flex; flex-direction: row; flex-wrap: wrap; padding-top: 140px; padding-bottom: 50px;}
.company-section2 > div:nth-of-type(1) { width: 48%; padding-right: 50px; position: relative;}
.company-section2 > div:nth-of-type(1):before { content: ""; position: absolute; width: 150%; right:90px; top:-80px; height: 100%; background: #fff0dc; }
.company-section2 > div:nth-of-type(1) img { position: relative; z-index: 3;}
.company-section2 > div:nth-of-type(2) { width: 52%; }

.transitions-box { position: absolute; z-index: 4; width: 100%; height: 100%; overflow: hidden;}
.idx-section-2-bg { position: absolute; width: 100%; height: 100%; top: 0; left: 0; background: #f7f7f7;}
.idx-section-2-bg2 { opacity: 0.5;}

/*ability*/
.circle-container { position: relative; z-index: 1;}
.dummy { padding-top: 100%; height: 0; }
.circle {margin: 15%;position: absolute;top: 0;bottom: 0;left: 0;right: 0;background: #fff;border-radius: 50%;transition: all 0.4s ease-out 0s;}

.idx-ability-list { display: flex; flex-direction: row; flex-wrap: wrap;}
.idx-ability-list > div { display: block; width: calc(25% - 18px); margin: 0 9px 30px 9px; position: relative;}
.idx-ability-list > div:nth-of-type(1) .circle { background: #c05140;}
.idx-ability-list > div:nth-of-type(2) .circle { background: #4075c0;}
.idx-ability-list > div:nth-of-type(3) .circle { background: #bfc040;}
.idx-ability-list > div:nth-of-type(4) .circle { background: #40c0b7;}
.idx-ability-list > div:nth-of-type(2) .idx-ability-name { border-color: #4075c0;}
.idx-ability-list > div:nth-of-type(3) .idx-ability-name { border-color: #bfc040;}
.idx-ability-list > div:nth-of-type(4) .idx-ability-name { border-color: #40c0b7;}
.idx-ability-list > div:hover .idx-ability-btn { transform: rotate(180deg);}
/*.idx-ability-list > div:hover .circle { margin: 20%}*/
.idx-ability-top { position: relative; }
.idx-ability-pto { position: absolute; width: 100%; height: 100%; z-index: 2; display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: center; align-items: center;}
.idx-ability-pto img { width: 71px; -webkit-filter:brightness(100);}
.idx-ability-name { font-size: 18px;padding-bottom: 10px; color: #333; font-weight: 500; text-align: center; margin-bottom: 18px; border-bottom: 2px solid #c05140;}
.idx-ability-info { padding: 0 16px; color: #333;}

/*enterprise*/
.enterprise-section { padding-bottom: 280px; position: relative; overflow: hidden;}
.enterprise-area { position: absolute; background: rgba(255,255,255,.8); border: 1px solid #e02829; padding: 20px 20px 0 20px;font-size: 16px; line-height: 28px; color: #333; /*letter-spacing: 0.1rem;*/box-shadow: 0px 0px 20px 0px rgba(0,0,0,0.1);}
.enterprise-area p { line-height: 130% !important; font-size: 15px!important;}
.enterprise-area-1 { top:80px; left: 38px; max-width: 450px;}
.enterprise-area-2 { top:323px; right: 112px; max-width: 540px;}
.enterprise-area-3 { top:610px; left: 226px; width: 435px;}
.enterprise-area-1:after { position: absolute; content: ""; width: 28px; height: 1px; background: #e02829; right: -29px; bottom: 89px;}
.enterprise-area-2:after { position: absolute; content: ""; width: 165px; height: 1px; background: #e02829; right: 100%; top: 42px;}
.enterprise-area-3:after { position: absolute; content: ""; width: 1px; height: 121px; background: #e02829; left: 208px; top: -121px;}
.enterprise-area a { color: #333;}
.enterprise-area-name { font-size: 20px; color: #e02829; font-weight: 700; line-height: 100%; padding-bottom: 10px; text-transform: uppercase;}
.enterprise-area-name2 { font-size: 18px; color: #333; font-weight: 500; line-height: 130%; padding-bottom: 10px;}

/*history*/
.history-section { max-width: 976px; margin: 0 auto 50px auto;}
.history-year {  margin: 15px 0; display: flex; flex-direction: row; flex-wrap: nowrap; align-items: center;}
.history-year > span { display: block; width: calc((100% - 100px) / 2); height: 2px; background: #555555;}
.history-year::before {content: ''; display: block; width: calc((100% - 100px) / 2); height: 2px; background: #555555;}
.history-year::after {content: ''; display: block; width: calc((100% - 100px) / 2); height: 2px; background: #555555;}
.history-year > div { width: 100px; text-align: center; color: #e02829; font-size: 26px; font-weight: 700; line-height: 100%;}

.history-list-1 { display: flex; flex-direction: column; flex-wrap: nowrap; position: relative; padding-bottom: 50px;}
.history-list-1:after { position: absolute; content: ""; width: 18px; height: 100%; top: 0; left: calc(50% - 9px); background: #e9e9e9;}
.history-list-1 > div { width: 50%; position: relative; z-index: 3; padding: 20px 55px 0px 55px; font-weight: 400; color: #333; font-size: 20px; line-height: 30px;}
.history-list-1 > div span, .history-list-1 > div > div { display: block; color: #7a7a7a; font-size: 16px;}
.history-list-1 > div:after { position: absolute; z-index: 2; content: ""; width: 24px; height: 24px; border-radius: 100%; border: 2px solid #7a7a7a; top: 51px; background: #fff;}
.history-list-1 > div:before { position: absolute; content: ""; width: 38px; height: 2px; background: #7a7a7a; top: 63px;}
.history-left { text-align: right; margin: 0 auto 0 0;}
.history-left:after { right: -12px;}
.history-left:before { right: 10px;}
.history-right { text-align: left; margin: 0 0 0 auto;}
.history-right:after { left: -12px;}
.history-right:before { left: 10px;}

/*certificaiton*/
.certificaiton-list { display: flex; flex-direction: row; flex-wrap: wrap; padding: 40px 0;}
.certificaiton-list > div {  width: 33.33%; padding: 0 30px 60px 30px;}
.certificaiton-pto {  position: relative; line-height: 0; margin-bottom: 20px;}
.certificaiton-pto:after {  position: absolute; content:""; left: 20px; bottom: 20px; background: #f4f4f4; width: 100%; height: 100%; border-radius: 10px;}
.certificaiton-pto img {  width: 100%; position: relative; z-index: 2;box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.3);}
.certificaiton-name { font-size: 17px; color: #333; text-align: center;}

/*responsibility*/
.responsibility-bottom { display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; padding:30px 0 70px 0; }
.responsibility-bottom > div { width: 50%;}
.responsibility-bottom > div:nth-of-type(1) {  padding-right: 90px;}

.responsibility-info { display: flex; flex-direction: row; flex-wrap: wrap; padding-top: 20px; }
.responsibility-info > div { width: 50%; padding-right: 30px; }
.responsibility-info > div > b { display: block; font-size: 22px; font-weight: 700; padding-bottom: 20px;}
.responsibility-info-list > div { padding-left: 40px; background: url(../images/responsibility-icon.png) no-repeat top left; font-size: 19px; padding-bottom: 18px;}

/*products*/
.products-section { display: flex; flex-direction: row; flex-wrap: wrap;}
.products-section > div:nth-of-type(1) { width: 220px;}
.products-section > div:nth-of-type(2) { width: calc(100% - 220px); padding-left: 30px;}

.no-border:before, .no-border:after { display: none;}
.side_classLink2 { position: relative; background: rgba(255,255,255,.8); border-left: 1px solid rgba(0,0,0,.4);padding:20px 20px 10px 25px; box-shadow: 0px 0px 20px 0px rgba(0,0,0,0.4); }
.side_classLink2 > ul { list-style:none; margin: 0; padding: 0;}
.side_classLink2 > ul > li { padding: 0 0 12px 0; margin: 0;}
.side_classLink2 > ul > li > a{ font-size: 17px; color: #333; display:block; padding:5px 0; line-height:100%; font-weight: 500; position: relative;}
.side_classLink2 > ul > li > a:before{ content: ""; position: absolute; left:-26px; top:0; height: 100%; width: 4px; background: #e02829;transition: all 0.4s ease-out 0s; opacity: 0;}
.side_classLink2 > ul > li > a:hover, .side_classLink2 > ul > li > a.current { color:#e02829; }
.side_classLink2 > ul > li > a:hover:before, .side_classLink2 > ul > li > a.current:before { opacity: 1; }
.side_classLink2 > ul > li > ul { padding:10px 0 0px 0;}
.side_classLink2 > ul > li > ul > li { display: block;}
.side_classLink2 > ul > li > ul > li > a{ display: block; position: relative; padding-bottom: 0px; color: #333333; font-size: 14px; line-height: 30px; padding-left: 15px;}
.side_classLink2 > ul > li > ul > li > a:before{ content: ""; position: absolute; left:0px; top:10px; transition: all 0.4s ease-out 0s; width: 0;height: 0;border-style: solid;border-width: 4.5px 0 4.5px 5px;border-color: transparent transparent transparent #606060;}
.side_classLink2 > ul > li > ul > li > a:hover, .side_classLink2 > ul > li > ul > li > a.current { color:#e02829;}
.side_classLink2 > ul > li > ul > li > a:hover:before, .side_classLink2 > ul > li > ul > li > a.current:before { border-color: transparent transparent transparent #e02829;}
.side_classLink2 > ul > li.current02{ display:none; }
.m_classLink2{ display:none;}

.pro-list { display: flex; flex-direction: row; flex-wrap: wrap; padding-bottom: 30px;}
.pro-list > div { margin: 0 10px 20px 10px; width: calc(25% - 20px);}
.pro-list > div:hover .pro-list-pto:before { top:-10px; left: -10px;}
.pro-list > div:hover .pro-list-btn { transform: scale(1);}
.pro-list-pto { position: relative; line-height: 0; margin-bottom: 10px;}
.pro-list-pto img { width: 100%; position: relative; z-index: 2;}
.pro-list-btn { position: absolute; z-index: 3; width: 100%; height: 100%; display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: center; align-items: center;transition: all 0.4s ease-out 0s; transform-origin: 50% 50%; transform: scale(0);}
.pro-list-btn > a { display: inline-block; width: 40px; height: 40px; border-radius: 100%; background: #000000; text-align: center; line-height: 35px; margin: 0 5px;}
.pro-list-btn > a img { width: 20px;}
.pro-list-pto:before { position: absolute; content: ""; width: 100%; height: 100%; background: #f7f0d9; top:0px; left: 0px;transition: all 0.4s ease-out 0s; }

.pro-list-name { padding-bottom: 5px; font-size: 14px; line-height: 170%; color: #333;}
.pro-list-name span { display: block; font-size: 17px; color: #000; font-weight: 500;}
.pro-list-cash span { display: inline-block; margin-right: 10px; font-style: italic; font-weight: 400;}
.cash-o { font-size: 14px; text-decoration: line-through;}
.cash-s { font-size: 17px; color: #e02829;}

#page {  display: flex; flex-direction: row; flex-wrap: wrap; justify-content: center; padding: 20px 0 60px 0;}
#page > a { display: inline-block; width:30px; height:30px; line-height: 27px;  text-align: center; font-size: 17px; font-weight: 400; color: #777777; margin: 0 5px 5px 5px; border-radius: 100%; background: #dedede;}
#page > a:hover, #page > a.current { background: #e57018; color: #fff;}

/*products-detail*/
.products-detail-section { display: flex; flex-direction: row; flex-wrap: wrap; padding-bottom: 30px;}
.products-detail-section > div { padding-bottom: 25px;}
.products-detail-section > div:nth-of-type(1) { width: 50%; padding: 0 5%;}
.products-detail-section > div:nth-of-type(2) { width: 50%; padding-left: 50px;}

.pro-b { text-align: center;box-shadow: 0px 0px 20px 0px rgba(0,0,0,0.2); margin-bottom: 15px;}
.rslides_tabs { margin:0px; padding: 0; text-align:left; display:flex; flex-direction:row; flex-wrap:wrap; }
.pro-s { margin: 0; display: flex; flex-direction: row; flex-wrap: wrap;}
.pro-s li { width: calc(25% - 8px); margin:0 8px 8px 0; line-height:0; list-style: none; display: inline-block;}
.pro-s li img { height: 100%;}
.rslides_here  { box-shadow: 0px 0px 0px 1px #e02829;}

.pro-note { background: #e02829; padding: 7px 10px; display: flex; flex-direction: row; flex-wrap: nowrap; line-height: 120%; margin-bottom: 10px;}
.pro-note > div:nth-of-type(1) { width: 110px; padding-right: 5px; border-right: 1px solid #fff; color: #fff; font-size: 14px;}
.pro-note > div:nth-of-type(2) { width: calc(100% - 110px); padding-left: 10px; font-size: 16px; font-weight: 500; color: #fff; font-style: italic;}

.pro-spec { border-bottom: 1px solid rgba(0,0,0,.3); padding: 15px 0; display: flex; flex-direction: row; flex-wrap: wrap;}
.pro-spec > div:nth-of-type(1) { width: 40px;}
.pro-spec > div:nth-of-type(2) { width: 150px; padding-left: 15px; padding-right: 10px; font-size: 17px; font-weight: 700;}
.pro-spec > div:nth-of-type(3) { width: calc(100% - 40px - 150px); font-size: 17px; line-height: 30px; font-weight: 400;}

.pro-select-section { padding: 25px 0 10px 0; border-bottom: 1px solid rgba(0,0,0,.3);}
.pro-select { display: flex; flex-direction: row; flex-wrap: wrap;}
.pro-select > div { padding-bottom: 20px;}
.pro-select > div:nth-child(odd) { width: 100px; padding-top: 2px; font-weight: 500; font-size: 17px; letter-spacing: 0.05rem;}
.pro-select > div:nth-child(even) { width: calc(100% - 100px);}

.type-btn-0 { min-width: 80px; display: inline-block;border-radius: 5px; text-align: center; line-height: 35px; padding: 0 10px; background: #c0c0c0; font-size: 16px;font-weight: 500; color: #ffffff; margin: 0 10px 10px 0; cursor: pointer;}
.type-btn-0.current { background: #e57018;}

.number-box { border: 1px solid #cfcfcf; display: flex; flex-direction: row; flex-wrap: nowrap; width: 180px; height: 40px;font-size: 16px;font-family: 'Arial';}
.number-minus { width: 36px; border-right: 0px solid #444; line-height: 36px; display: block; text-align: center; background: none; cursor: pointer;} 
.number-plus { width: 36px; border-left: 0px solid #444; line-height: 36px; display: block; text-align: center; background: none; cursor: pointer; } 
.number-minus:hover, .number-plus:hover {opacity: 0.6;}
.number-box > input {display: block; width: calc(100% - 72px); text-align: center; background: none; border-width: 0; font-size: 16px; height: 38px; line-height: 38px;}

.pro-detail-cash { padding-bottom: 15px;}
.pro-detail-cash > div { display: inline-block; margin-right: 24px; color: #555; font-size: 17px; letter-spacing: 0.05rem;}
.cash2-o { color:#333333; font-weight: 700; text-decoration: line-through;}
.cash2-s { color:#b61e19; font-weight: 700; font-size: 26px; }

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

.btn01 a{display: inline-block;  border-radius: 30px; line-height: 60px; border: 1px solid #333333; position: relative; min-width: 210px; padding: 0 40px 0 30px; color: #333; font-size: 16px; overflow: hidden;}
.btn01 a:hover:before, .btn01 a:hover:after {width: 100%;}
.btn01 a:hover {color: #fff; border-color: #e57018; transform: scale(0.9);}
.btn01 a:hover span {background: #fff;}
.btn01 a:hover span:after {border-color: transparent transparent transparent #fff;}
.btn01 a:before, .btn01 a:after{ content: ""; position: absolute; left: 0; top: 0; width: 0%; height: 100%; background: #e57018;}
.btn01 a:before{transition: all 0.2s ease-out 0s; opacity: 0.3; }
.btn01 a:after{transition: all 0.5s ease-out 0s; opacity: 0.9;}
.btn01 a div {position: relative; z-index: 3;transition: all 0.4s ease-out 0s;}
.btn01 a span {position: absolute; z-index: 3; width: 15px; height: 1px; background: #333; right: 22px; top:calc(50% - 0px);transition: all 0.4s ease-out 0s;}
.btn01 a span:after {position: absolute;content: ""; width: 0;height: 0;border-style: solid;border-width: 4px 0 4px 7px;border-color: transparent transparent transparent #333; right: -6px; top:-3.5px;transition: all 0.4s ease-out 0s;}

.btn-tool { display: flex; flex-direction: row; flex-wrap: nowrap; }
.btn-tool > a:nth-of-type(1) { border-right: 1px solid #c1c1c1;}
.btn-tool > a:hover .btn-box-name { color: #e02829;}
.btn-tool > a:hover .btn-prev2 span, .btn-tool > a:hover .btn-next2 span { border-color: #e02829;}
.btn-box-name { display: inline-block;color: #333333; font-size: 16px; line-height: 18px; width: 100px; position: relative; padding: 0 15px;font-weight: 300;}
.align-right { text-align: right;}
.btn-prev2, .btn-next2 { display: inline-block; width:26px; height: 26px; line-height: 23px;  text-align: center; font-size: 16px;  color: #888888; margin: 0 5px 5px 5px; transition: all 0.4s ease-out 0s;}
.btn-prev2 span, .btn-next2 span { display: inline-block; width: 20px; height: 20px; border-width: 1px 1px 0 0; border-style: solid; border-color: #252525; position: relative; top:-5px;transition: all 0.4s ease-out 0s;}
.btn-prev2 span { transform: rotate(-135deg); left: 2px;}
.btn-next2 span { transform: rotate(45deg); right: 2px;}

.btn-last { pointer-events: none; opacity: 0.5;}

.pro-detail-section2 { padding-bottom: 50px;}

.pro-detail-application { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: center; padding-top: 25px; padding-bottom: 40px;}
.pro-detail-application > div { margin: 0 15px 25px 15px; max-width: 120px;}
.pro-detail-application-pto { width: 100px; height: 100px; border-radius: 50%; text-align: center; line-height: 0; padding-top: 24px; margin-bottom: 20px; margin-right: auto; margin-left: auto;}
.pro-detail-application-pto img { width: 55px; }
.pro-detail-application-name { text-align: center; line-height: 24px;}

.loop3 {z-index: 5; padding: 25px 0 100px 0;}
.loop3 .owl-dots { }
.loop3 .owl-item {position: relative; padding: 0px;}
.loop3 .owl-item:nth-child(even) .idx-shopping-pto { border-image: linear-gradient(to top right, #e67520 0%, #fff3dc 100%); border-image-slice: 1;}
.loop3 .owl-nav { position: absolute; bottom:66%; left: 0; width: 100%; z-index: 11;}
.loop3 .owl-prev, .loop3 .owl-next { position:absolute; z-index:100; top:calc(50% - 0px); background:transparent !important; width: 40px; height: 40px; border-radius: 0 !important; border: 0px solid #666666 !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: 0.7;transition: all 0.4s ease-out 0s;width: 30px; height: 30px; background-size: contain; display: block; border-width: 2px 2px 0 0; border-style: solid; border-color: #adadad; position: relative;}
.loop3 .owl-prev:before { content: ""; transform: rotate(-135deg); left: 15px; }
.loop3 .owl-next:before { content: ""; transform: rotate(45deg); right: 12px;}
.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: 30px; width: 100%; text-align: center !important; padding: 0 50px; }
.loop3 .owl-dots .owl-dot span, .loop3  .owl-dots .owl-dot span { background: #dad6d6 !important; width: 14px !important; height: 14px !important; border: 0px solid #4c4c4c;}
.loop3 .owl-dots .owl-dot.active span, .loop3  .owl-dots .owl-dot:hover span { background: #e02829 !important; }

.related-pto { line-height: 0; margin-bottom: 12px;}
.back-btn { border-top:1px solid #c1c1c1; padding: 60px 0 20px 0;}
.align-center { text-align: center;}

/*news*/
.news-list-1, .news-list-2, .news-list-3 { margin-right: -30px; display: flex; flex-direction: row; flex-wrap: wrap;}
.news-list-1 > div, .news-list-2 > div { margin:0 30px 30px 0; width: calc(50% - 30px);}
.news-list-3 > div { margin:0 30px 30px 0; width: calc(25% - 30px);}

.news-list-pto { overflow: hidden; border-radius: 10px; margin-bottom: 16px;position: relative;overflow: hidden;width: 100%;height: 0; padding-bottom: 65.71%;}
.news-list-pto > a {position: absolute;top: 0;left: 0;right: 0;bottom: 0;line-height: 0;display: flex;justify-content: center;align-items: center;flex-wrap: wrap;}
.news-list-pto > a > img{max-height: 100%!important;width: auto;}
.news-list-pto img { width: 100%;}
.news-list-title { color: #333; font-size: 20px; font-weight: 500; line-height: 30px; margin-bottom: 8px;}
.news-list-title2 { font-size: 18px;}
.news-list-data { font-size: 15px; line-height: 28px; padding-bottom: 6px;}
.news-list-date { font-size: 15px;} 

/*contact*/
.contact-sectin { position: relative; margin-bottom: 40px; padding: 40px 0 75px 0; display: flex; flex-direction: row; flex-wrap: wrap;}
.contact-sectin:after { position: absolute; content: ""; top: 0; right: 0; width: 65%; height: 100%; background: #fff; box-shadow: 0px 0px 20px 0px rgba(0,0,0,0.2); }
.contact-sectin > div { position: relative; z-index: 3;}
.contact-sectin > div:nth-of-type(1) { width: calc(50% - 58px); background: #eb7149; padding: 30px;}
.contact-sectin > div:nth-of-type(2) { width: calc(50% + 58px); padding: 48px 40px;}

.contact-pto { line-height: 0; margin-bottom: 10px;}
.contact-title { display: flex; flex-direction: row; flex-wrap: nowrap; align-items: center; margin-bottom: 7px;}
.contact-title > div:nth-of-type(1) {  padding-right: 12px; white-space: nowrap; font-size: 22px; font-weight: 500; color: #ffffff;}
.contact-title > div:nth-of-type(2) {  width: 100%; height: 1px; background: #fff;}
.contact-info {  color: #fff; line-height: 30px; padding-bottom: 30px;}
.contact-info a {  color: #fff; }
.contact-info span {  font-weight: 500; }


.contact-form input[type="text"], .contact-form input[type="number"], .contact-form input[type="tel"], .contact-form input[type="phone"], .contact-form input[type="date"], .contact-form input[type="email"], .contact-form input[type="password"], .contact-form input[type="button"], .contact-form textarea { font-size: 16px; border-width:0px; border-style: solid; border-color: #dbdbdb; margin: 0px 0 20px 0; width: 100%; padding: 4px 15px; color:#333; background: #fff8f2; font-family: 'Noto Sans TC', sans-serif; line-height: 50px; border-radius: 0px; font-weight: 300;}
.contact-form textarea { height:452px; padding:10px 10px; resize:none; line-height: 120%;font-weight: 300;}
.contact-form select{ margin: 0 0 20px 0;  width:100%; background-image: url(../images/product-select.png); background-repeat: no-repeat; background-position: calc(100% - 17px) 25px; -webkit-appearance: none; -moz-appearance: none; appearance: none;   background-color: #fff8f2; font-size: 16px; border-width:0px; border-style: solid; border-color: #dbdbdb; color:#333; font-family: 'Noto Sans TC', sans-serif;  padding: 20px 35px 20px 10px ;  line-height: 100%; border-radius: 0px;font-weight: 300;}
.contact-form option { padding:1px 5px;}
.contact-form select::-ms-expand {
    display: none;
}

.color-red { color: #e02829;}

.contact-title2 { padding-bottom: 4px; font-weight: 400;}

.contact-btn-box { display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: space-between; }
.contact-btn-box > div { padding-bottom: 15px; }
.contact-btn a { min-width: 150px; }
.pro_list_link {position: absolute;left: 0;top: 0;right: 0;bottom: 0;z-index: 3;}

.welfare_items{display: flex;flex-wrap: wrap;}
.welfare_item {width: 24%;margin:0 1.3% 32px 0;background-color: transparent;}
.welfare_item:nth-of-type(4n+4) {margin-right: 0;}
.welfare_title{font-size: 20px;padding: 16px 0 20px;text-align: center;font-weight: 600;}
.welfare_text{padding: 24px 16px 32px;}
#content .welfare_text p {margin: 0;font-size: 16px;color: #454545;line-height: 1.8;font-weight: 400;}
.welfare_photo {display: flex;flex-wrap: wrap;justify-content: space-between;}
.welfare_photo > div {width: 48.4%;}
.section_recruit{padding: 100px 0;}
.recruit_box{padding: 28px;max-width: 600px;margin: 0 auto;box-shadow: 0 8px 20px rgba(0,0,0, .25);border-radius: 16px;}
.recruit_box_title{margin-bottom: 32px;width: 100%;font-size: 30px;font-weight: 600;text-align: center;}
.recruit_box_txt{width: 100%;text-align: center;}
#content .recruit_box_txt p {font-size: 20px;margin: 12px 0;color: #454545;font-weight: 400;}
.recruit_box_txt a:link, .recruit_box_txt a:visited {color: #000;text-decoration: underline;word-break: break-all;}
.recruit_box_links{width: 100%;margin: 28px 0 12px;display: flex;flex-wrap: wrap;justify-content: center;}
.recruit_box_links .recruit_box_link {display: inline-block;margin-right: 24px;}
.recruit_box_links .recruit_box_link:last-child {margin-right: 0px;}
.recruit_box_link{margin-bottom: 16px;}
.recruit_box_link img {transition: all .3s;}
.recruit_box_link:hover img {transform: scale(0.88);}
.colro_line_1{border-bottom: 2px solid #EA6E48;}
.colro_line_2{border-bottom: 2px solid #F8D474;}
.colro_line_3{border-bottom: 2px solid #489CEA;}
.colro_line_4{border-bottom: 2px solid #56CC39;}
.colro_line_5{border-bottom: 2px solid #D45AFF;}
.colro_line_6{border-bottom: 2px solid #FF5BA0;}
.colro_line_7{border-bottom: 2px solid #40CDAB;}


@media only screen and (max-width:800px){
  .welfare_photo > div {width: 100%;text-align: center;margin-bottom: 16px;}
  .welfare_photo > div:last-child{margin-bottom: 0;}
}
@media only screen and (max-width:576px){
  .welfare_item{width: 31%;margin-right: 3.45%;}
  .welfare_item:nth-of-type(4n+4){margin-right: 3.45%;}
  .welfare_item:nth-of-type(3n+3){margin-right: 0;}
  .section_recruit{padding: 70px 0;}
  .welfare_text { padding: 16px 16px 16px;}
  .welfare_photo{margin-top: 32px;}
}
@media only screen and (max-width:475px){
  .welfare_item{width: 48%;margin-right: 4%;}
  .welfare_item:nth-of-type(3n+3){margin-right: 4%;}
  .welfare_item:nth-of-type(2n+2){margin-right: 0%;}
  .recruit_box_txt{text-align: left;}
}
@media only screen and (max-width:375px){
  .welfare_item{width: 96%;margin: 0 auto 20px;}
  .welfare_item:nth-of-type(3n+3){margin-right: auto;}
  .welfare_item:nth-of-type(2n+2){margin-right:auto;}
}
@media only screen and (max-width: 1279px) {
	#content { padding-top: 60px;}
    
}
.application_demo_title h4{font-weight: 600;font-size: 20px;margin-bottom: 12px;}
.application_demo_boxs {display: flex;flex-wrap: wrap;margin-bottom: 28px;}
.application_demo_box {width: 30.3%;margin-right: 4.5%; position: relative;height: 0;overflow: hidden;padding-bottom: 21%;margin-bottom: 20px;}
.application_demo_box > div {position: absolute;width: 100%;height: 100%;display: flex;flex-wrap: wrap;justify-content: center;}
.application_demo_box > div img {height: 100%;}
.application_demo_box:nth-of-type(3n+3) {margin-right: 0;}

@media only screen and (max-width: 1400px) {
    .enterprise-area-1 { top:42px; left: 38px; max-width: 425px;}
    .enterprise-area-2 { top:303px; right: 32px; max-width: 408px;}
    .enterprise-area-3 { top:585px; left: 203px; width: 435px;}
}
@media only screen and (max-width: 1200px) {
    .demo-section { background-size: auto; background-position: top left;}
    
    .enterprise-section { padding-bottom: 30px;}
    .enterprise-area { position: relative;; top: auto !important; left: auto !important; right: auto !important; bottom: auto !important; margin-bottom: 25px; width: 100% !important; max-width: 100%!important;}
    .enterprise-area-1:after, .enterprise-area-2:after, .enterprise-area-3:after { display: none;}
    .enterprise-area-name2 {font-size: 22px!important;}
    .enterprise-area p {font-size: 17px!important; line-height: 160%!important;}
}

@media only screen and (max-width: 980px) {
    #content { font-size: 16px; line-height:30px; }
    #content p{ font-size: 16px; line-height:30px; }
    p, td, li, label { font-size: 16px; }
    
    .demo-top { padding-top: 20px; padding-bottom: 0; flex-direction: column; justify-content: flex-start;}
    .demo-top h1 { font-size: 25px;}
    
    aside { margin-bottom: 20px; z-index: 6;}
    .side_classLink { display:none;}
	.m_classLink{ display:block; position:relative; }
	.m_classLink b { font-weight: 500; }
	.m_classLink a.main{ display:block; font-size:17px; position:relative; padding: 5px 10px; color:#333; text-align:left; cursor:pointer; background: rgba(255,255,255,.4);}
    .m_classLink a.main:before { position: absolute; content: ""; width: 10px; height: 10px; border-width:0 0 1px 1px; border-color: #000000; border-style: solid; bottom: -1px; left: -1px;}
    .m_classLink a.main:after { position: absolute; content: ""; width: 10px; height: 10px; border-width:0 1px 1px 0; border-color: #000000; border-style: solid; bottom: -1px; right: -1px;}
	.m_classLink a.main i{ display:block; font-size:20px; position:absolute; right:20px; top:40%; margin-top:-11px; color:#333; font-style:normal; font-family: 'Font Awesome 5 Free';font-weight: 900;}
	.m_classLink > ul{ display:none; width:100%;  position:absolute;  background: rgba(255,255,255,.95); padding: 0px; list-style:none;box-shadow: 0px 0px 15px 0px rgba(0,0,0,0.1);}
	.m_classLink > ul > li { }
	.m_classLink > ul > li > a{ font-size: 15px; color: #333; display:block; padding:10px 10px; line-height:100%; border-bottom: 1px solid #dadada; font-weight: 400;}
    .m_classLink > ul > li:nth-last-of-type(2) > a{ border-bottom: 0px solid #d8d8d8;}
    .m_classLink > ul > li > a:hover, .m_classLink > ul > li > a.current { color:#e02829;}
	.m_classLink > ul > li > ul { }
	.m_classLink > ul > li > ul > li { display: block;}
	.m_classLink > ul > li > ul > li > a{ display: block; position: relative; padding-bottom: 13px; color: #898989; font-size: 15px; line-height: 100%; }
	.m_classLink > ul > li > ul > li > a:hover, .m_classLink > ul > li > ul > li > a.current { color:#2660ad;}
	.m_classLink > ul > li.current02{ display:none; }
    
    .banner { margin-bottom: 25px;}
    .banner img {box-shadow: 0px 10px 10px 0px rgba(0,0,0,0.2); }
    
    .title04 { font-size: 24px; padding-bottom: 30px;}
    .title04:before, .title04:after { left: 0px; width: 10px; height: 10px;}
    .title04:before{ top:2px;}
    .title04:after { top:17px;}
    
    .company-section2 { padding-top: 80px; }
    .company-section2 > div:nth-of-type(1) { width: 100%; padding-right: 0px; margin-bottom: 35px; }
    .company-section2 > div:nth-of-type(1):before { top:-20px; }
    .company-section2 > div:nth-of-type(2) { width: 100%; }
    
    .idx-ability-title { font-size: 24px;}
    .idx-ability-list > div { width: calc(50% - 18px);}
    
    .responsibility-bottom > div { width: 100%;}
    .responsibility-bottom > div:nth-of-type(1) {  padding-right: 0px; text-align: center; padding-bottom: 40px;}
    
    .responsibility-info > div > b { font-size: 20px;}
    
    .products-section > div:nth-of-type(1) { width: 100%;}
    .products-section > div:nth-of-type(2) { width: calc(100% - 0px); padding-left: 0px;}
    
    .side_classLink2 { display:none;}
	.m_classLink2{ display:block; position:relative; }
	.m_classLink2 b { font-weight: 500; }
	.m_classLink2 a.main2{ display:block; font-size:17px; position:relative; padding: 5px 10px; color:#333; text-align:left; cursor:pointer; background: rgba(255,255,255,.4);}
	.m_classLink2 a.main2 i{ display:block; font-size:20px; position:absolute; right:20px; top:40%; margin-top:-11px; color:#333; font-style:normal; font-family: 'Font Awesome 5 Free';font-weight: 900;}
	.m_classLink2 > ul{ display:none; width:100%;  position:absolute;  background: rgba(255,255,255,.95); padding:10px 25px; list-style:none;box-shadow: 0px 0px 15px 0px rgba(0,0,0,0.1);}
    .m_classLink2 > ul > li { padding: 0 0 12px 0; margin: 0;}
    .m_classLink2 > ul > li > a{ font-size: 16px; color: #333; display:block; padding:5px 0; line-height:100%; font-weight: 500; position: relative;}
    .m_classLink2 > ul > li > a:before{ content: ""; position: absolute; left:-26px; top:0; height: 100%; width: 4px; background: #e02829;transition: all 0.4s ease-out 0s; opacity: 0;}
    .m_classLink2 > ul > li > a:hover, .m_classLink2 > ul > li > a.current { color:#e02829; }
    .m_classLink2 > ul > li > a:hover:before, .m_classLink2 > ul > li > a.current:before { opacity: 1; }
    .m_classLink2 > ul > li > ul { padding:10px 0 0px 0;}
    .m_classLink2 > ul > li > ul > li { display: block;}
    .m_classLink2 > ul > li > ul > li > a{ display: block; position: relative; padding-bottom: 0px; color: #333333; font-size: 14px; line-height: 30px; padding-left: 15px;}
    .m_classLink2 > ul > li > ul > li > a:before{ content: ""; position: absolute; left:0px; top:10px; transition: all 0.4s ease-out 0s; width: 0;height: 0;border-style: solid;border-width: 4.5px 0 4.5px 5px;border-color: transparent transparent transparent #606060;}
    .m_classLink2 > ul > li > ul > li > a:hover, .m_classLink2 > ul > li > ul > li > a.current { color:#e02829;}
    .m_classLink2 > ul > li > ul > li > a:hover:before, .m_classLink2 > ul > li > ul > li > a.current:before { border-color: transparent transparent transparent #e02829;}
	.m_classLink2 > ul > li.current02{ display:none; }
    
    .products-detail-section > div:nth-of-type(1) { width: 100%; padding: 0 0 20px 0;}
    .products-detail-section > div:nth-of-type(2) { width: 100%; padding-left: 0px;}
    
    .news-list-1 > div { width: calc(100% - 30px);}
    .news-list-3 > div { width: calc(50% - 30px);}
    
    .contact-sectin { padding: 20px 0 0 0; }
    .contact-sectin:after { width:100%; }
    .contact-sectin > div:nth-of-type(1) { width: calc(100% - 0px); order: 2;}
    .contact-sectin > div:nth-of-type(2) { width: calc(100% + 0px); order: 1; padding: 0 20px 20px 20px;}
    .contact-form textarea  { height: 250px;}
}
@media only screen and (max-width: 768px) {
    .demo-section { background-position: -270px 0;}
    .application_demo_box {width: 47.5%;margin-right: 5%; padding-bottom: 33%;}
  .application_demo_box:nth-of-type(3n+3) {margin-right: 5%;}
  .application_demo_box:nth-of-type(2n+2) {margin-right: 0;}
    .enterprise-section img { display: none;}
    
    .history-list-1:after { left: 9px;}
    .history-list-1 > div { width: 100%;  padding: 20px 0px 0px 70px; font-size: 18px; }
    .history-left { text-align: left; margin: 0 0 0 auto;}
    .history-left:after { left: 6px; right: auto;}
    .history-left:before { left: 20px; right: auto;}
    .history-right:after { left: 6px;}
    .history-right:before { left: 20px;}
    
    .pro-list > div { width: calc(50% - 20px);}
}
@media only screen and (max-width: 640px) {
    .certificaiton-list > div {  width: 50%;}
    .certificaiton-name { font-size: 16px; line-height: 140%;}
    
    .pro-note { flex-direction: column;}
    .pro-note > div:nth-of-type(1) { width: 100%; padding-right: 0px; border-right: 0px solid #fff; border-bottom: 1px solid rgba(255,255,255,.5); padding-bottom: 10px; margin-bottom: 10px;}
    .pro-note > div:nth-of-type(2) { width: calc(100% - 0px); padding-left: 0px; }
}
@media only screen and (max-width: 570px) {
    .circle {margin: 7%;}
}

@media only screen and (max-width: 430px) {
    .pro-spec > div:nth-of-type(2) {width: calc(100% - 40px);}
    .pro-spec > div:nth-of-type(3) {width: 100%;}
}

@media only screen and (max-width: 414px) {
    .responsibility-bottom { padding-bottom: 30px;}
    .responsibility-info {  padding-top: 0; padding-left: 30px;}
    .responsibility-info > div { width: 80%; padding-right: 0px; padding-bottom: 30px; }
	
    .btn-box { justify-content: center;}
    .application_demo_box {width: 100%;padding-bottom: 65%;}
    .application_demo_box:nth-of-type(3n+3) {margin-right: 0;}
    .application_demo_box:nth-of-type(2n+2) {margin-right: 0;}

}

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

}